DEV Community

Cover image for How to use Tailwind CSS in React
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

How to use Tailwind CSS in React

#react #webdev #tailwindcss #programming

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:

node –v.
Enter fullscreen mode Exit fullscreen mode

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

npx create-react-app react-twcss
cd react-twcss
Enter fullscreen mode Exit fullscreen mode

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

npm start
Enter fullscreen mode Exit fullscreen mode

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:

npm install -D tailwindcss@npm:@tailwinat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode

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:

npm install @craco/craco
Enter fullscreen mode Exit fullscreen mode

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:

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

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:

npx tailwindcss-cli@latest init.
Enter fullscreen mode Exit fullscreen mode

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:

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

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

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

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

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:

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

Your browser should look similar to the image below.

Tailwind CSS in React

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.

WINDFRAME

Resources

Top comments (0)

Read next

michymono77 profile image

Rails and Ruby Deprecation Warnings: Why You Should Care and How to Fix Them

Michiharu Ono -

zrebhi profile image

Recurring Tasks in .NET C# : All options explained

Zied Rebhi -

parzival_computer profile image

KISS Principle (Keep It Simple, Stupid)

Parzival -

nicooprat profile image

Using BroadcastChannel API with Vue to sync a ref across multiple tabs

Nico Prat -