A simple way to configure tailwindcss in reactjs create-react-app

configure-tailwindcss-in-reactjs.md

Steps to configure tailwindcss in reactjs create-react-app

Note: Make sure you're runing Node.js 12.13 or higher in order to buid tailwindcss >2.0

• step # 1

npm install tailwindcss@latest postcss@latest autoprefixer@latest -D

• step # 2

initialize Tailwind CSS by creating the default configurations

npx tailwind init tailwind.config.js --full

• step # 3

touch postcss.config.js

put the following configuration in above created file

const tailwindcss = require('tailwindcss')

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

• Step # 4

mkdir styles && cd styles && touch main.css tailwind.css (in src/styles directory, or anywhere else you want)

put following configuration in tailwind.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

How to configure your app To build your CSS

put the following in package.json to build tailwind.css

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

It's done! Start making awesome design components with tailwindcss