Setting up Tailwind CSS v2.0 with Create React App
Hello Everyone, Today I am going to show you how to set up Tailwind CSS v2.0 with create react app.
Create Your React Project
So before starting to set up Tailwind CSS with create react app, first, we need to create a react project using the command below if you already have a project, you don't need to create it again.
npx create-react-app your_react_project_name
Setting Up Tailwind CSS
Now we can start setting up Tailwind CSS in our react project. If you prefer to watch video tutorial, you can check out it over here .
Installing npm packages
First, we need to install tailwindcss, postcss, autoprefixer and postcss-cli packages as dev dependencies using npm.
PostCSS: PostCSS is a tool for transforming CSS with JS plugins.
Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules. It is a CSS post-processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code. If you want to read more about postcss, check out their documentation.
So, in order to install all the four npm packages, you need to run this command
npm install tailwindcss postcss autoprefixer postcss-cli -D
After installing the npm packages, now, you need to create a new folder inside src folder and name it assets and then inside the newly created assets folder create two files output.css and tailwind.css. Open your tailwind.css file and paste the following code.
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, If you want to see all the tailwind default configuration, you can run this command to generate a tailwind config file.
npx tailwindcss init --full
The above command generates a tailwind.config.js
file which contains all the default tailwind configurations. I don't recommend you directly make any changes in this file.
After that create a tailwindcss-config.js and postcss.config.js file by using this command
npx tailwindcss init tailwindcss-config.js -p
tailwindcss-config.js
file looks something like this.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
In this file, you can extend default tailwind css configurations like colors, fonts, and much more.
Now, Open your postcss.config.js
file and change the tailwindcss line with this one.
tailwindcss: { config: './tailwindcss-config.js' },
Your complete postcss.config.js file looks like this.
module.exports = {
plugins: {
tailwindcss: { config: './tailwindcss-config.js' },
autoprefixer: {},
},
}
Now, open your package.json file and replace all the script files with these ones.
"scripts": {
"start": "npm run watch:css && react-scripts start",
"build": "npm run watch:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch:css": "postcss src/assets/tailwind.css -o src/assets/output.css"
}
Import output.css file
Now, you need to import the output.css file inside your app.js file like this.
import './assets/output.css'
And run
npm start
Congratulations🎉! You successfully set up Tailwind CSS v2.0 in your react project.
Thanks for reading this blog
If you find the blog helpful, feel free to subscribe to our newsletter so whenever our new post goes live, you'll get the notification first.
Do leave your feedback and suggestions as comments.
Thank You
frontend
Nice post, but one doubt. In nextjs would be the same approach?
Thanks for reading. Actually, I never use nextjs. So, I don't know whether this method will work or not. But this is a basic approach to integrate tailwind. So, you can this approach to integrate tailwind in your nextjs app.
Reactjs developer
Rishi Purwar Thanks for your post, I tried setting tailwind using the official docs in my react app for the first time but they are so confusing, followed your post it just worked.
Comments (4)