What is tailwind?
A utility-first CSS framework that can be composed to build any design, directly in your markup.
Setting up Tailwind CSS
In this guide, we’ll cover a simple installation of Setting up Tailwind CSS in a Create React App project.
Uninstall create-react-app (recommended)
If you've previously installed create-react-app globally. we recommend you uninstall the package using:
npm uninstall -g create-react-app or yarn global remove create-react-app
Existing React Project
Bump "react-scripts" in package.json to 5.0.0 and run npm install.
New React Project
To create a new app use the following commands
npx create-react-app my-app or yarn create react-app my-app
Once new app is intialized go to the app directory, In our case cd my-app
Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm
npm install -D tailwindcss postcss autoprefixer
Generate Config
Then run the init command to generate both tailwind.config.js and postcss.config.js.
npx tailwindcss init -p
Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: [
"./src/**/*.{js,jsx}",
],
...
}
Add the Tailwind directives to your CSS
Add the tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Start your dev process
Run your build process with npm run start.
That's all. Enjoy.
Latest comments (4)
Hello, I am new to Tailwind. I followed the documentation and setup Tailwind in my React app. It's working perfectly fine.
But I see people doing extra stuffs like, using craco, postcss config, and so on.
Can someone explain why is that extra configuration even needed when it's working even without those?
Sorry, if it's a silly question. I am new to tailwind.
Not the best idea, better use Vite.js for this.
This is part of the new, current version of
create-react-appas I just initialized a new project recently using CRA's CLI tool, so this tutorial was unnecessary.Necessary for beginners who still using old method to create react app (CRA). Also who wants to remove craco dependencies from their existing project.