Setup for React + Tailwind CSS

TalwindCSS is an awesome CSS framework that we can use to style anything with ease and get our webpage to look better. Integrating TailwindCSS with React is not so simple at first as lots of different things have to installed and not just doing two npm install and it will be done. I made it hell simpler now to do this. You can have a review over this and let me know if this works fine for you.

Installing React App

npx create-react-app .

Installing TailwindCSS

npm i -D tailwindcss postcss-cli autoprefixer

Here -D means dev dependencies ' Here postcss is used for compiling tailwindcss and also allows us to use autoprefixer

Installing Tailwind config file

npx tailwind init tailwind.js --full

Create a postcss config file

touch postcss.config.js

Add in the following code in postcss.config.css

const tailwindcss = require('tailwindcss');

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

Now open src folder and create a file named assets and create two CSS files in it named main.css and tailwind.css

Add the below code in tailwind.css

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

Now go to package.json as we want to create some extra scripts:-

Your scripts code should look like this:-

"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/assets/tailwind.css -o src/assets/main.css",
    "watch:css" : "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

After doing this I faced error of not found postcss and autoprefixer, I just installed both of them using:-

npm i postcss

npm i autoprefixer

Now one last work to do is change the css file name in index.js

import './assets/main.css';

You should have this to import all the tailwindcss.

dubesar