Setup TailwindCSS in create-react-app

Horacio Herrera: [0:00] Let's create a React application by running npx create-react-app theming-with-tailwind. When that finishes, let's go and navigate to their project and install tailwind as a dev dependency.

[0:18] We run yarn add tailwindcss --def. After that finishes, we can run tailwind init. If you open the project in the code editor, we see that we have a plane create-react-app application with a tailwind.config.js file.

[0:40] Let's go and clean up some of the files here. Let's remove App.css. Let's remove App.test.css. Let's also remove the logo.svg. Let's go to App.css, and let's clean up some code here. Let's remove this import. Also, remove everything inside the App function and returns a simple div with the h1 that says Hello World.

[1:08] If we run the project, we see that we have Hello World in our browser. Now that we have everything installed, let's go to index.css and add at the top of the file @tailwind base; @tailwind components; and @tailwind utilities.

[1:28] Let's go to package.json file, and let's add some scripts that we need in order to make our project work. The first one is "build:tailwind" which is "tailwindcss build src/index.css -o src/output.css".

[1:49] This script is telling the TailwindCSS CLI to build our base index.css file and output a new file called output.css. Also, we're going to add "prestart" which is going to run "yarn build:tailwind" and also "prebuild" which is going to do the same.

[2:11] The prestart and prebuild scripts are going to be run before their "start" main script and the "build" main script. Whenever you do yarn start, it will run first prestart and then it will run start.

[2:29] This is needed because we are building all our CSS in a different process than our all application. Also, another thing that we can do is to add our output file ./src/output.css to our .gitignore file.

[2:45] That way, the file that is being generated is not going to be stored in our Git repository. The last thing that we need to do is go to the index.js file and update the import to the './index.css' file and change it to '.output.css' file.

[3:02] Now we can go and stop and start our server again, running yarn start. Then, we see that the result of our script will change the style of our h1. To see this working, we can go to our App.js file and add a tailwind className to our h1 to add the text-red-500, which is a TailwindCSS class and see that our heading changes the text color to red.

[3:32] In review, we create React application using create-react-app. We then install TailwindCSS to our project. Also, we added a couple of scripts to build our CSS in a separate process. We import the output of our CSS script result in our index.js file. Then, we test it with a simple tailwind class, and the result is visible in our screen with a Hello World in red.