Setup for React + Tailwind CSS

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.

from Tumblr https://generouspiratequeen.tumblr.com/post/635313499098300416

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s