How to use Tailwind CSS with a React App

What is Tailwind CSS?

Tailwind is a modern CSS framework. It is a utility-first-based framework and provides you with a unique set of utility classes which makes the development process very easy and results in making a unique design. Utility-first CSS is fast, robust, and very efficient making your coding hassle-free. Tailwind CSS is also not opinionated; it means you are totally free to customize the design lament and website's component.

Tailwind is a power pack of everything you need to create a website without writing any custom CSS. The main difference between Tailwind and its competitors is that it gives developers complete control over the styling of a web application.

Why Use Tailwind CSS?

There’s a lot that goes on in web development. It can sometimes, thus, become an overly complicated task. Mapping the impact of styling might become tedious and time-consuming hampering the progress of the application/website.

Implementing Tailwind CSS will eliminate all the above-mentioned issues. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code. Custom styling can be provided to the components with the help of this framework.

Tailwind CSS: Pros and Cons

Tailwind CSS: Advantages

1. Control Over Styling
2. Faster CSS Styling Process
3. Responsiveness and Security
4. Additional Features

Tailwind CSS: Disadvantages

1. Styling and HTML are Mixed
2. It Takes Time to Learn
3. Lack of Important Components
4. Documentation

In this blog, we’ll demonstrate how to make Tailwind CSS work inside your React project without having to eject Create React App.

Using Tailwind CSS in your React App

First, open your terminal and type the following commands to create a new project.

#using NPX
npx create-react-app tailwindreact-app

#using NPM
npm init react-app tailwindreact-app

#using yarn 
yarn create react-app tailwindreact-app

create-react-app is the official React build tool for scaffolding new React projects. It leverages webpack and babel and reduces the hassle of configuring and setting up the build processes for projects, allowing you to focus on writing the code that powers your app.

Next, install Tailwind and its dependencies:

cd tailwindreact-app

npm install tailwindcss postcss-cli autoprefixer -D

We need to initialize Tailwind CSS by creating the default configurations. Type the command below in your terminal:

npx tailwind init tailwind.config.js --full

This command creates a tailwind.config.js in your project’s base directory; the file contains the configuration, such as our colors, themes, media queries, and so on. It’s a useful file that helps with predefined sets of properties which will aid the need to re-brand certain conventions or properties if the need arises.

Now update tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
}

How To Configure PostCSS?

The PostCSS documentation states that:

“PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.”

Why Autoprefixer?

It’s necessary to install Autoprefixer alongside Tailwind CSS because Autoprefixer usually tracks caniuse.com to see which CSS properties need to be prefixed. Hence, Tailwind CSS does not provide any vendor prefixes. If you’re curious as a cat in regards to PostCSS navigates to their documentation.

Create a PostCSS configuration file in your base directory manually or using the command:

touch postcss.config.js

Add the following lines of code to your PostCSS file:

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};

Because PostCSS is necessary to lint our CSS, hence this configuration.

Update scripts in package.json

Now navigate to your package.json file in your root directory and replace the "scripts" with the following:

"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},

Create your styles folder

Create a folder named styles inside of your src folder. This is where all your styles would be stored.

Inside the styles folder, create a tailwind.css and an index.css file.

/* src/styles/tailwind.css */

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

Import main.css

You should delete the index.css and app.css files in your project root directory and remove the import statements in both the Index.js and App.js files respectively.

Now you are ready to import tailwind into your index.js file:

import './styles/main.css';

Now in your app.js file go ahead and add the following code:

<div className="text-red-500">
     TechvBlogs
</div>

Now It's time to run our project:

npm run start

Thank you for reading this blog.