How to use Tailwind CSS in React.js

In this article we will learn how to install tailwind CSS in a react project.

Photo by Pankaj Patel on Unsplash

Introduction:

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind is a modern CSS framework that offers several advantages over traditional CSS. Its utility-first approach and pre-defined classes make styling HTML components faster, more efficient, and more consistent.

Install Tailwind CSS with React.js

1. Create your project:

$ npx create-react-app firstapp

cd my-project

2. Install Tailwind CSS:

once you have created your react project ,go to the react app directry to install tailwind . Install 'tailwindcss’and its peer dependencies via npm, and then run the init command to generate both 'tailwind.config.js’ and 'postcss.config.js’.

$ npm install -D tailwindcss postcss autoprefixer

$ npx tailwindcss init -p

3. Configure your template paths:

Add the paths to all of your template files in your tailwind.config.js file.Replace the content with the additional code shown below.

/** @type {import('tailwindcss').Config} */
module.exports = {
//Replace the content with the code below
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS:

Add the @tailwind directives for each Tailwind’s layers to your index.css file.In your react directive go to ‘index.css’ and remove all dummy css and replace with below.

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

5. Start your build process:

Run your build process with npm run dev.

npm run dev

6.Start using Tailwind in your project:

Start using Tailwind’s utility classes to style your content.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}