Install Tailwind CSS with React Js

Install Tailwind CSS with React Js

 Install Tailwind CSS with react js




You must need to follow some steps


Step1: Create your own project in react. and then go to the project directory

      - npx create-react-app my-project

      - cd my-project

Step2: Install Tailwind CSS follow the commands

          First of all install Tailwind. and its peer dependencies via npm. and then generate both                            `tailwind.config.js` and `postcss.config.js`.

       - npm install -D tailwindcss postcss autoprefixer

       - npx tailwindcss init -p


Step3: Configure the Template Path

Add the paths to all of your template files in your `tailwind.config.js` file.

            content: [

                      "./src/**/*.{js,jsx,ts,tsx}",

                         ],


Step4: Tailwin directives add in `./src/index.css` file

                 @tailwind base;

                 @tailwind components;

                 @tailwind utilities;

Step5: Build the process with `npm run start`

Step6: Start your project with Tailwind CSS

export default function App() {

  return (

    <h1 className="text-5xl  underline">

      Hello, Elvi!

    </h1>

  )

}