How to setup Tailwind 3 in React with CRA 5 ?

In this article, we will see how to setup Tailwind 3 in React with CRA 5, but before that we need some basic ideas about these 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 fldername

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: [],
}

Output: