I Added Tailwind to a React Project

I started a new project, Colour Converter, in large part to learn how to use Tailwind. I initially thought the hard part would be learning the Tailwind vocabulary. After reading about it and thinking I knew enough to get started, I discovered that the hard part was actually installing Tailwind.

I watched a video on Tailwind to familiarize myself with how to use it. However, I wasn’t sure if that was the proper way of doing things so I started reading the documentation. What ensued was me reading about PostCSS as if it was a common knowledge thing. I didn’t know what PostCSS was so it was really hard trying to figure out whether my errors were caused by the lack of knowledge in that area.

I watched this very helpful video by TailwindLabs, which explained what PostCSS is. From what I’ve learned, PostCSS takes in an input, which is a CSS file and it runs the file through plugins. The plugins transform the input CSS and generate an output CSS.

So in Tailwind, you have a CSS file with Tailwind directives. I’m guessing through PostCSS, these directives get unpacked and a CSS file gets generated, which has style rules for different classes.

Anyway, here are the steps in installing Tailwind, with comments.

Installing Tailwind Steps

1. Install Tailwind, PostCSS, and Autoprefixer as dependencies

   • Go to your project directory
   • Type command - npm install -D tailwindcss postcss autoprefixer

2. Create config files for Tailwind and PostCSS

   • Go to your project directory
   • Type command - npx tailwindcss init postcss
     • This generates tailwind.config.js, which is the place you go to when you want to customize Tailwind
     • This generates postcss.config.js, which gives the instruction to run the input CSS file through tailwindcss first and then autoprefixer

3. Add Tailwind directives in your CSS file

   • Open src/index.css
   • Type @tailwind base; @tailwind components; @tailwind utilities; in src/index.css

4. Create a script that builds your output CSS file

   • Open package.json
   • Create a new script called, “build-css” that has the value of “tailwindcss -i src/index.css -o public/styles/tailwind.css”
     • "build-css": "tailwindcss -i src/index.css -o public/styles/tailwind.css"
     • This takes the input CSS (src/index.css) and runs it through a series of PostCSS plugins. Plugins transform the input CSS and generates an output CSS (public/styles/tailwind.css).
     • The input CSS has the Tailwind directives (@tailwind base, @tailwind components, @tailwind utilities), which contains reset styles, container styles, and utility classes styles. These styles get unpacked and placed into the output CSS.

5. Build the CSS file

   • Type command - npm run build-css

Note: To update the output CSS, make changes to the input CSS and run the command, npm run build-css, again.

And that’s it!

Now you can add classes to elements to style them.