DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cheralathan
Cheralathan

Posted on

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.

Tailwind

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}",
  ],
  ...
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Start your dev process

Run your build process with npm run start.

That's all. Enjoy.

Top comments (4)

Collapse
 
ivanjeremic profile image
Ivan Jeremic

Not the best idea, better use Vite.js for this.

Collapse
 
abhishekram404 profile image
Keshav Kishor Ram • Edited on

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.

Collapse
 
crock profile image
Alex Crocker

This is part of the new, current version of create-react-app as I just initialized a new project recently using CRA's CLI tool, so this tutorial was unnecessary.

Collapse
 
cheralathann profile image
Cheralathan

Necessary for beginners who still using old method to create react app (CRA). Also who wants to remove craco dependencies from their existing project.

Take Your Github Repository To The Next Level

Take Your Github Repository To The Next Level πŸš€οΈ: A step-by-step guide on creating the perfect Github repository.