Charles Kimani's Tech Blog

Charles Kimani's Tech Blog

A Guide to Setup and Integrate TailwindCSS into React

A Guide to Setup and Integrate TailwindCSS into React

🌟 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 👊.

 
Share this