How to install Tailwind CSS with your react project

AlkemyHossain — Sat, 30 Jan 2021 16:00:10 +0000

Introduction: Tailwind CSS is a class-based UI CSS framework to design your websites, the way you want within shortage amount of time. I found that it is pretty tricky to embedded with react project.
Now we will see how we can install Tailwind CSS in your project by following some steps. So let’s get started…

I will add a link to the GitHub repository of the ReactJs & tailwind starter. You can clone and start without the hassle of setup.
Just make sure you have installed Node.Js 12+ and React CLI.

1. Create React App

We will start by creating React project By create-react-app and cd into the newly-created directory. If you have already done this you can skip it.

$ npx create-react-app my-project
$ cd my-project

2. Install Tailwind

Install Tailwind via npm (node package manager)
You will need Node.js 12 or higher.

Install tailwind with other dependencies using

$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

As react doesn’t support postcss8 so we will install postcss7.

Install CRACO
CRACO is Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app. Craco is used for override PostCSS

$ npm install @craco/craco

Once it’s installed, update your ‘scripts’ as below in package.json e

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
 },

Next, create a ‘craco.config.js’ at the root of our project and add those line:

module.exports = {
   style: {
     postcss: {
       plugins: [
         require('tailwindcss'),
         require('autoprefixer'),
       ],
     },
   },
 }

Generate Tailwind config file:
Now, Let’s generate your tailwind.config.js file:

npx tailwindcss init

This command will create the tailwind config file in your root directory.
And replace this line to remove unused style in production:

module.exports = {
 purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
 darkMode: false, // or 'media' or 'class'
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
}

Installing is done! Let’s find out, how we can use tailwind classes in your project.

Use of Tailwind CSS

Include Tailwind in your CSS
Now open your index.css and replace it with importing tailwind base, components, utilities

@tailwind base;
@tailwind components;
@tailwind utilities;

Include index.css.
Make sure you include or import index.css in your parent index.js file.

import './index.css';

We are finished now. Create a component using Tailwind CSS and add it to your index.js for test.
Run your project using

`npm run start`

I hope you find this article helpful. This is my very first writing experience in dev.to.

Happy Coding!

DEV Community: AlkemyHossain

How to install Tailwind CSS with your react project

1. Create React App

2. Install Tailwind

Use of Tailwind CSS