How to add taillwindcss to an existing React project

#tailwindcss #react #tutorial

How to add taillwindcss to an existing React project

Go to directory of your React project and use yarn or npm to add taillwindcss postcss-cli autoprefixer

Using yarn

yarn add tailwindcss postcss-cli autoprefixer -D

Then type this command in the terminal to create the default configuration

npx tailwind init tailwind.js --full

A taillwind.js file is created in the current directory

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

Create a postcss.config.js file

touch postcss.config.js

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

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Create an assets directory in the src folder

mkdir ./src/assets

Create a file called taillwind.css in ./src/assets

touch ./src/assets/tailwind.css

Type in tailwind.css:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Modify the package.json file as follows:

"scripts": {
    "start": "yarn watch:css && react-scripts start",
    "build": "yarn build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

A file called main.css will be generated each time we start the application

Then import the file ./src/assets/main.css in the App.js file (or the root file of the application)

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));