Setting Up TailwindCSS with React

Tailwindcss is a utility-first CSS framework loaded with classes that help you design almost any design without leaving the HTML. In this article, we are going to learn how to integrate the tailwindcss with React.

Getting Started

Let’s create your react project. We are going to use the create-react-app to setup everything related to React quickly.

npx create-react-app reactailwind

Now go to your project directory cd reactailwind and install the tailwindcss.

Install Tailwind

Tailwind requires to install its peer-dependencies such as postcss and autoprefixer. If you don’t have installed the postcss and autoprefixer to your project then create with the following command.

npm -i -D tailwindcss postcss autoprefixer

Why autoprefixer with Tailwind?

Tailwind does not automatically add vendor prefixes to the CSS it generates, we recommend installing autoprefixer to handle this for you

https://tailwindcss.com/docs/installation

Error: PostCSS plugin tailwindcss requires PostCSS 8

I face this issue while integrating Tailwind with CRA. To resolve this issue I simply installed the PostCSS module.

npm -i postcss

Generate Tailwind Configuration

We can generate the Tailwind configuration file by the following command.

npx tailwindcss init

The above command will generate a blank configuration file, that you can customize according to project need. Let’s keep this file as it is.

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

Set-up PostCSS Configuration

Let’s create a postcss.config.js file to configure it for tailwind.

touch postcss.config.js

Open the postcss.config.js file and paste the following codes to it.

const tailwindcss = require("tailwindcss");
module.exports = {
    plugins: [
        tailwindcss("./tailwind.config.js"),
        require("autoprefixer")
    ]
};

Create Global CSS

Next, create a CSS file and import the base, components and utilities from tailwind. I have created a file global.css under /src/styles/global.css

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

Connect Tailwind, PostCSS and React

Now, open the package.json and change the scripts. This is how it looks before editing.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Modify it with the following

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/global.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/global.css -o src/styles/main.css"
},

As you noticed, we have created two new commands watch:css and build:css that runs the postcss command. We added the source for the global style and the output path to the postcss command.

Now open the App.js file and add the compiled style by postcss.

import './styles/main.css';

We hope this article will help you to learn the setting up tailwindcss with react. If you like this article then please follow us on Facebook and Twitter.

• Category: ReactJs

Post navigation