Overview

In this blog, I will be going to show you how to set up tailwindcss in react js + vite project. Follow the step-by-step instruction.

Step 1: Create a React Js project with Vite js

Create an empty react js project with vite js.

$ npm create vite@latest
Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y)

Proceed with (y) by pressing y on your keyboard, and simply answering the questions.

Project name: tailwindcss-demo
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Others
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

Now you have to cd to the created directory in my case, it is tailwindcss-demo and runs the command npm install

cd tailwindcss-demo
npm install

Open tailwindcss-demo folder in your favorite editor. your folder structure looks like this.

Step 2: Install TailwindCSS in your react js project

In this step, you can simply copy-paste the command or visit https://tailwindcss.com/docs/guides/vite

note: It's a great habit to read the doc.

Run the below command within the same folder that you created. In my case it was tailwindcss-demo

1. Install the dependencies. (tailwindcss, postcss, autoprefixer)

    npm install -D tailwindcss postcss autoprefixer
   

   Check the package.json file for the installed dependencies.

   

2. After installing the dependencies initialize the tailwind configuration.

    npx tailwindcss init -p
   

   Here is what you can see after running the above command.

   

3. Copy-paste the configuration to your tailwind.config.cjs file

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [],
    };
   

4. Copy-paste these base styling to src/index.css file

   1. Remove everything from the index.css file and update the file with the below code.

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

1. Now make some changes within App.jsx file

    import "./App.css";
   
    function App() {
      return (
        <div className="App">
          <h1 className="text-3xl font-bold underline">Hello world!</h1>
        </div>
      );
    }
   
    export default App;
   

2. Run the dev server

   Head first to your terminal and type the below command, make sure you are in the same folder location, in my case my terminal opens at the location tailwindcss-demo

    npm run dev
   

See your result: 🎉🎉

Thanks for reading...