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.

Categories: