Charles Kimani



A Guide to Setup and Integrate TailwindCSS into React

A Guide to Setup and Integrate TailwindCSS into React

Charles Kimani's photo
Charles Kimani
ยทMay 21, 2021ยท

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: [

๐ŸŒŸ 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