How to set up Tailwind in React

React is a front-end JavaScript library for creating user interfaces or UI components. This article shows you how to set up Tailwind CSS in your React application.

What is Tailwind CSS?

According to the official documentation:

Tailwind CSS is a utility-first CSS framework that allows you to quickly create user interfaces with ease. The beauty of Tailwind is that it doesn’t enforce design specifications or how your site should look; instead, you simply combine small components to create a unique user interface.

How to install React

Let’s start by creating a new Create React App project using the command below:

npx create-react-app `my-project`
cd my-project

The above command installs the React boilerplate and creates a new project titled my-project or whatever you decide to call it.

Setup Tailwind CSS

Let’s look at how to put up Tailwind CSS on the React app we just made.

To set up Tailwind, we’ll need the NPM packages below:

• PostCSS: is a JavaScript-based utility for converting CSS.

• Autoprefixer: PostCSS plugin to parse CSS.

You can install them using:

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

Because Create React App does not currently support PostCSS 8, you must install the Tailwind CSS v2.0 PostCSS 7 compatibility build as demonstrated above.

Next, we need to install CRACO to be able to customize Tailwind because Create React App doesn’t allow you to change the PostCSS configuration natively:

npm install @craco/craco

Update your scripts in your package.json file once it’s been installed to utilize craco instead of react-scripts:

• "start": "react-scripts start",
  

• "build": "react-scripts build",
  

• "test": "react-scripts test",
  

• "start": "craco start",
  

• "build": "craco build",
  

• "test": "craco test",
  

Create a craco.config.js file and add the Tailwind CSS and autoprefixer PostCSS plugins:

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

To generate your tailwind.config.js file:

npx tailwindcss init

The command creates a minimal tailwind.config.js:

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

Configure Tailwind to remove any styles that are no longer in use from the production environment.

// tailwind.config.js

 module.exports = {
 
-   purge: [],
 
+   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 
  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
   plugins: [],
 }

In addition, we will include the @tailwind directive in our ./src/index.css file. Open the default ./src/index.css file and replace the original file contents with the @tailwind directive to incorporate Tailwind’s base, components, and utilities styles:

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

Finally, ensure your CSS file is being imported in your ./src/index.js file: src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
import App from './App';
 import reportWebVitals from './reportWebVitals';

 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );

You’re done! Now when you run NPM start, Tailwind CSS will be ready to use in your Create React App project.

That’s all there is to it! I hope you found the article interesting. Please do not hesitate to provide feedback.