38
Setup Tailwind with Create React App without craco.
What is tailwind?
A utility-first CSS framework that can be composed to build any design, directly in your markup.

In this guide, we’ll cover a simple installation of Setting up Tailwind CSS in a Create React App project.
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
Bump "react-scripts" in package.json to 5.0.0 and run
npm install
. 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 tailwindcss and its peer dependencies via npm
npm install -D tailwindcss postcss autoprefixer
Then run the init command to generate both
tailwind.config.js
and postcss.config.js
.npx tailwindcss init -p
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 for each of Tailwind’s layers to your
./src/index.css
file.@tailwind base;
@tailwind components;
@tailwind utilities;
Run your build process with
npm run start
.That's all. Enjoy.
38