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.
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.

38

This website collects cookies to deliver better user experience

Setup Tailwind with Create React App without craco.