Setup Tailwind CSS with React

In this article, I'll be showing you how to setup Tailwind CSS with React so you can build highly customizable UIs in React with a utility based approach.

Create React Application

Firstly, we will use create-react-app to setup a react app. To do this, run the following command in your terminal substituting in the name of your application:

npx create-react-app appName

Obviously, you will need npm installed. You can install it by installing node.js

Install Tailwind

Next, we will install tailwind and its peer-dependencies in order to work with our react app.

npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Remember the -D flag since these are dev dependencies

Install Craco

To be able to configure Tailwind in with create-react-app, we will need another package called craco.

npm install @craco/craco

After installing craco, we will update our scripts in our package.json from the default react-scripts to craco. The default scripts should go from this:

 // package.json
 {
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
  }

to this:

 // package.json
 {
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
    },
  }

Note: don't change the eject script to craco

Configure Craco

Next, we will create a craco.config.js file at the root of our project so we can add previously installed PostCSS plugins:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

TailwindCSS Config File

Next, we will need to generate a tailwind.config.js file using tailwindcss-cli. To do this we can run the following command in the terminal:

npx tailwindcss-cli@latest init

This will create a base tailwind.config.js file that looks like this:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We can then update the purge property so that unused styles are removed in production:

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

This file is used to customize the theme, which allows you to change sizes, colors and more about your styling. You can learn more about customizing the theme and variants in Tailwind's documentation.

Add Tailwind To Our CSS

In our index.css in the ./src directory that is automatically generated by Create React App, we can use the @tailwind directive to include the base, components and utilities styles.

Remember to remove the original contents in this file.

The ./src/index.css file should now look like this:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

We're Done

Ensure that the index.css file is imported in the index.js file and you are ready to begin using Tailwind CSS in your application. You can now run npm start and you're ready to go!

Remember to check out the official documentation of Tailwind CSS if you're learning to see all styles you can use in your application as well as how to customize the theme and variants, e.t.c

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake-K-Yeboah

You can also show your support by buying me a coffee 😃