Add Tailwindcss to a React project

Khaled Garbaya: [0:00] Now we have our timeline. Let's do some styling. To do that, we will use Tailwind CSS. First thing, let's install tailwindcss, postcss-cli and autoprefixer.

[0:16] Let's create a tailwind configuration file. We can do that through npx tailwind. Now that's done, let's create our postcss config file.

[0:29] Let's go to the project, and here, let's create postcss.config.js at the root of our project. In here, we'll add tailwindcss and autoprefixer as a plugin. Let's save that.

[0:46] Let's go to our src folder, create another folder there, call it styles, and move our index.css inside of style folder. It's failing because we moved the file and we didn't update the import, so let's go here and then update the import to styles. Inside of Styles, let's create another folder called tailwind.css.

[1:17] Let's load Tailwind's base configurations. Let's save. Next, let's go to our package.json, and add a new script. Let's call it build:style. Inside of that, we will build the tailwind.css file and then output it to the index.css here, have an extra extension. Now this is done, let's add it to our start script. Here, we'd have npm run and build:style script. Then starting our server after that.

[2:02] Let's test our changes. First, stop the server and run it again. You can see here our styles already applied because if we go to the App.js, we can see I have the utility classes already.

[2:21] Let's add some more margin to the text. We'll have a margin top of 5. You can see here it was applied. Last thing to do is to do some clean up. Let's move this timeline to a separate file.

[2:46] Let's export this. Going back to our app, let's import it back, and take the useState and useEffect back to the timeline. All of this is imported from 'react'. Of course, some typos.

[3:21] Here we are, we have some styled elements.