How to setup Tailwind 3 in React with CRA 5 ?

In this article we will how to setup Tailwind 3 in React with CRA 5, but before that we need some basic ides about this technologies.

• React JS: A free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook.
• TailwindCSS: A highly customizable, low-level, and utility-first CSS framework for rapidly building custom user interfaces.
• Create React App: Helps us to create single-page React applications without configuring Webpack and babel.
• PostCSS: Uses JavaScript-based plugins to automate routine CSS operations.
• Autoprefixer: A postcss plugin that automatically does vendor prefixing.

Note: If you are planning to use tailwind in an existing project make sure that you are using CRA version 5.0.0 or above. If you are still using CRA v4, you will have to install CRACO (Create React App Configuration Override) to override the PostCSS configuration. 

Prerequisites:

Before continuing any further, please ensure that node and npm are installed on your machine. If required visit Installation of Node.js on Linux  or Installation of Node.js on Windows

Creating React Application And Setup:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install Tailwind, PostCSS, and Autoprefixer in your given directory.

npm install -D tailwindcss postcss autoprefixer

Note:  If you are going to deploy this application on Heroku or any similar cloud platform, please make sure that the dev dependencies don’t get purged during the build. Or you can remove the -D flag from the above command, to install these packages as saved dependencies.

Step 4: Configuring and importing Tailwind in the project.

npx tailwindcss init -p

This command will automatically generate config files for tailwind and postcss.

tailwind.config.js

module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

Step 5: Now locate the tailwind.config.js in the root of the directory and add the following paths to the content object in order to purge unused CSS classes.

• ./src/**/*.{js,jsx,ts,tsx}
• ./public/index.html

In the end, the tailwind.config.js file should look like

Javascript

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
theme: {
extend: {},
},
plugins: [],
}

Step 6: Importing Tailwind into our app

Now import the tailwind’s directives into a CSS file that would be used/imported throughout the application. By default, it’s index.css but you can use any other CSS file if you do not wish to import tailwind in the whole application.

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

Step 7: Run the application from the root directory of the project, using the following command.

npm run start

Example: We will now create a basic div component and apply some CSS classes to it.

index.js

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

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