Windframe Import update is finally here!

How To Use Tailwind CSS In React.


By Amarachi Iheanacho

Technical Writer

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 this article, we will look at how to use Tailwind CSS in React. We will cover how to install Tailwind, how to integrate it into your React project, and some tips and tricks to make the most out of Tailwind.

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


node –v.

Create react App Tailwind

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.

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

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


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

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.


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


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.


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

Tailwind CSS Configuration

To use Tailwind CSS in your react application, you will need to configure The Tailwind file. To do this we need to create another file named tailwind.config.js at the root of your directory. To do this you should go ahead and run the following command


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 with new purge paths. This will enable Tailwind CSS access to remove unused styles from the components in the production build.


module.exports = {
purge: [./src/**/*.{js,jsx,tsx},.public/index.html’],
dark mode: 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:

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

Then, you can go ahead and import the CSS from the index.css file to the index.js file.


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
<App />

Final look

We are going to create a simple React card using Tailwind CSS. To do this, we must first open our APP.js file and delete the code there and write the code below.


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">
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
className="text-indigo-700 text-base md:text-base italic
font-normal text-center"
"A utility-first CSS framework for rapid UI development. "
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"
className="flex-none w-14 h-14 bg-white rounded-full shadow-2xl
items-center justify-center"
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" />
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"
<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>
export default App;

Your browser should look similar to the image below.

Tailwind CSS in React


In conclusion, Tailwind CSS is a great way to quickly and easily style your React projects. With Tailwind, you can quickly and easily create beautiful, responsive websites with minimal effort. By following the steps outlined in this article, you can quickly and easily integrate Tailwind into your React project and start taking advantage of its powerful features.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.


Related Posts