How to use Tailwind CSS in React
Tags: react, webdev, tailwindcss, programming
Published: 2021-10-10 00:49:44

---
title: How to use Tailwind CSS in React
published: true
date: 2021-01-10 01:16:04 UTC
tags: [react, webdev, tailwindcss, programming]
canonical_url: https://www.devwares.com/blog//how-to-use-tailwind-css-in-react
cover_image: https://www.devwares.com/blog/images/how-to-use-tailwind-css-in-react.png
---


Tailwind CSS makes it possible for us to easily style every element directly on the components without having to create one big class in a separate file and write a bunch of properties to make something.
Tailwind CSS is simply a utility-based low–level CSS framework. It’s not the first of its kind but it is certainly the most popular.  Tailwind CSS allows us to write great CSS without leaving the file we are currently working on.
In our Tailwind CSS tutorial today, we are going to look at how to install Tailwind CSS with react.

## Table of Content 

- Install node
- Create react App
- Install Tailwind CSS via npm
- CRACO configuration
- Tailwind CSS Configuration
- Add Tailwind CSS 
- Final look
- Conclusion 

## Install Node

You must make sure you have the latest node installed in your system. If not, you can visit their website to download the latest node version. Make sure your node version is 12 -13.0 and higher in order to run Tailwind CSS. 
Once you have downloaded the latest version of node, you can open your terminal to check the latest version by running the code below

**Code:**

```javascript
node –v.
```

## Create react App

At this point you must have downloaded the latest node version. We can now go ahead to create react project. 

To do this we need to run a command on our terminal. 

Create-react-app command comes with pre-configured files and packages that helps install react and auto-compilation of CSS, JS and ESlint for error alerts.

Open your command line for windows and type the following code on the folder you created for this project

**Code**

```javascript
npx create-react-app react-twcss
cd react-twcss
```

After all the dependencies are installed you will see “success” at your terminal you can go ahead to run the famous code 

```javascript
npm start
```

The command above will start the server and it will automatically open in a browser with the react environment.

## Install Tailwind CSS via npm

At this stage, it is safe for us to go ahead and install tailwind CSS in react and its dependencies.
You can open your terminal and run the following command to install Tailwind CSS in react with its dependencies.

**Code:**

```javascript
npm install -D tailwindcss@npm:@tailwinat postcss@^7 autoprefixer@^9
```

This will take a few seconds to install.  

## CRACO configuration

The next step is to install create React App Configuration Override also known as CRACO. It’s a create-react-app configuration layer used to override the PostCSS Configuration.

**Install CRACO**

**Code:**

```javascript
npm install @craco/craco
```

Once the installation is complete, open the project in a text editor (Vs Code) and locate the package.Json in your root directory.
In the package.Json go ahead and replace the following files
- “react-scripts start” with “craco start”
- “react-script build” with “craco build”
- “react-script test” with “craco test”

Save the updates to the package.Json file.
After this, you can go ahead and create a new file and call it `Craco.config.js` in the root directory of your project. `< react-twcss>` file.
 
**Code:**

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

## Tailwind CSS Configuration

Create another file named `tailwind.config.js` file at the root of your directory. To do this you should go ahead and run the following command 

**Code:**

```javascript
npx tailwindcss-cli@latest init.
```

The command will create a file named `tailwind.config.js` file at the root of your project.
You can Update the tailwind.config.js file new purge paths. This will enable Tailwind CSS access to remove unused styles from the components in the production build. 


**Code:**

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

###Add Tailwind CSS
The next step is to go to your index.css file and delete the content and replace them with the following code.
Code:

```javascript
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Then, you can go ahead and import the CSS from index.css file to the index.js file.
Code:
 
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();
```

## Final look

we are going to create a simple card using tailwind CSS in react we just created. 
We are going to open our APP.js file and delete the code there and write the code below.

**Code:**

```jsx
function App() {
  return (
    <section className="App h-screen w-full flex justify-center items-center bg-purple-500">
      <div className="w-full max-w-md bg-white-800">
        <div className="rounded-t-xl bg-white px-6 py-6 md:p-6 text-lg md:text-xl leading-8 Md:leading-8 font-semibold">
          <p className="text-purple-900 text-xl md:text-xl font-black text-center pb-2">
            Tailwind CSS
          </p>
          <p className="text-indigo-700 text-base md:text-base italic font-normal text-center">
            "A utility-first CSS framework for rapid UI development. "
          </p>
        </div>
        <div className="flex items-center space-x-4 p-6 md:px-6 md:py-6 bg-gradient-to-tr from-purple-700 to-indigo-700 rounded-b-xl leading-6 font-semibold text-white">
          <div className="flex-none w-14 h-14 bg-white rounded-full shadow-2xl items-center justify-center">
            <svg height="54" preserveAspectRatio="xMidYMid" width="54" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 153.6"><linearGradient id="a" x1="-2.778%" y1="32%" y2="67.556%"><stop offset="0" stop-color="#2298bd" /><stop offset="1" stop-color="#0ed7b5" /></linearGradient><path d="M128 0C93.867 0 72.533 17.067 64 51.2 76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0zM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2 9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2-12.8 17.067-27.733 23.467-44.8 19.2-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8z" fill="url(#a)" /></svg>
          </div>
          <div className="flex-auto text-base md:text-base font-thin">
            Created By<br /><span className="text-xl md:text-xl text-purple-200 font-black">Adam Wathan</span>
          </div>
        </div>
      </div>
    </section>
  );
}

export default App;

```

Your browser should look similar to the image below.


![Tailwind CSS in React](https://www.devwares.com/blog/images/how-to-use-tailwind-css-in-react-2.png)

 
###Conclusion

In this tailwind CSS tutorial, we walked you through how to install tailwind CSS in react with a step by step approach. We also created a simple “Hello world” styling it with a tailwind CSS classes to demonstrate that the installation is working perfectly well. I hope you enjoyed this tutorial! you can check our other tailwind 

## Design and code tailwind CSS websites 3x faster

We created a tool to visually build tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [Get the Contrast PRO](https://www.devwares.com/product/bootstrap-contrast-pro)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind css in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)
- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)
- [Tailwind CSS Colors 3.0](https://www.devwares.com/blog/How-to-add-color-to-Tailwind/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)