loading...
Cover image for Setup for React + Tailwind CSS

Setup for React + Tailwind CSS

dubesar profile image Sarvesh Dubey Originally published at dubesar.hashnode.dev ・2 min read

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 .
Enter fullscreen mode Exit fullscreen mode

Installing TailwindCSS

npm i -D tailwindcss postcss-cli autoprefixer
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Create a postcss config file

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

Add in the following code in postcss.config.css

const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ]
}
Enter fullscreen mode Exit fullscreen mode
  • 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";
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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

npm i postcss
Enter fullscreen mode Exit fullscreen mode
npm i autoprefixer
Enter fullscreen mode Exit fullscreen mode

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

import './assets/main.css';
Enter fullscreen mode Exit fullscreen mode

You should have this to import all the tailwindcss.

Discussion

pic
Editor guide