A Guide to Setup and Integrate TailwindCSS into React

A Guide to Setup and Integrate TailwindCSS into React

ยท

1 min read

๐ŸŒŸ Create a React application via:

npx create-react-app your-app-name

๐ŸŒŸ Inside your application's folder run this commands in terminal:

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest
npx tailwind init tailwind.js --full

๐ŸŒŸ Create a file in the React Appliction called postcss.config.js

๐ŸŒŸ Add this code in postcss.config.js :

  const tailwindcss =  require("tailwindcss");

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

๐ŸŒŸ In src folder create assets folder

๐ŸŒŸ In assets folder create a file tailwind.css

๐ŸŒŸ Add the following imports in tailwind.css :

  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";

๐ŸŒŸ In assets folder create a file main.css (the imports in tailwind.css are compiled into this main.css which we will include into our application)

๐ŸŒŸ In the package.json file edit & add the following scripts:

  "start": "npm run watch:css && react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
  "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"

๐ŸŒŸ In the index.js file remove the following line and and replace it with the following line respectively:

import './index.css';
import './assets/main.css';

๐ŸŒŸ Hurray ๐Ÿฅณ๐Ÿฅณ๐Ÿฅณ Thats all the knowledge you need to integrate TailwindCSS with React. The NetNinja's YouTube Tutorial and the TailwindCSS documentation will help you learn TailwindCSS more, thankyou ๐Ÿ‘Š.