Hi there! Thanks for coming to my blog. Today we are going to be installing and configuring Tailwind in our React application. So, let's get straight into it shall we?

Creating your application

First we are going to run our create-react-app <name-of-your-application or npx create-react-app <name-of-your-application> if you do not have create-react-app installed on your system.

Cleaning up your react project

There are a number of files you will not need for this tutorial so you might just want to clean up your app just for simplicity sake. You can start by deleting the following files: App.test.js , serviceWorker.js, logo.svg, setupTests.js and App.css. Remove any references to these files in your index.js and App.js file.

Next you are going to clear all the code in the return statement and just pop an h1 tag with Hello World in there for now. By now you should have three files in your src folder, index.js, App.js, and index.css.

Configuring Tailwind

1. Run the following command yarn add tailwindcss
2. Clear your index.css file and add the following:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

   We are going to use the index.css file to generate the rest of our tailwind css.

3. Create a tailwind config file with the following command npx tailwindcss init. This will generate a tailwind.config.js file which is where we are going to define any of our own custom classes that do not ship with Tailwind. Next we are going to process the lines in step 2 into actual useable css

4. We need to process our css so create a file called postcss.config.js. Place the following code in your postcss.config.js file:

   module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ]
   }
   

   This file will automatically be picked up by our project whenever we run a postcss command

5. We are going to install postcss and autoprefixer as it is a requirement by Tailwind, so run the following command in your terminal: yarn add postcss-cli autoprefixer (Note: you can use npm to install your packages as well, I just prefer using yarn)
6. Next we want to create a script that will build our css. So head into your package.json file and add the following scripts:

   "scripts": {
    "build:css": "postcss src/index.css -o src/tailwind.css"
    //...
   }
   

   This command will take the index.css file and create a tailwind.css file with all of the Tailwind classes.
7. Run yarn build:css . Personally I only run this command after I have added some custom classes in the tailwind.config.js file because every time you add a custom class, you have to run the command so your custom css can be added to the tailwind.css file. However, if you prefer to have the file run every time you run the start script, alter your script as follows:

   "scripts": {
    "start": "yarn build:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
   }
   

8. Lastly, in your index.js import the tailwind.css file instead of the index.css file.

Just one last tip, if you are using VSCode, install the Tailwind CSS Intellisense extension. It helps immensely when typing out your tailwind css classes.

Thank you for taking the time to read this! Please like and share. See you next time 😉💥!