React + Tailwind Installation Guide ( Vite )

To create a Vite project with React and Tailwind CSS, follow these steps:

Step 1: Install Vite

First, you need to create a new Vite project with React.

1. Open the terminal.

2. Run the following command to create a new Vite project:

   

This will create a new project called my-vite-react-app using the React template. You can replace my-vite-react-app with any name you prefer.

3. After the command runs, navigate to your project folder:

   

   Step 2: Install Tailwind CSS

   Next, you need to install and configure Tailwind CSS in your project.

   1. Install Tailwind CSS and its dependencies by running the following command:

      

   2. Initialize Tailwind CSS by running the following command:

      

      This will create a tailwind.config.js file.

   3. Create a postcss.config.js file in the root of the project and add the following content:

      

   4. Now, configure Tailwind by editing the tailwind.config.js file to include the following content:

      

      This ensures Tailwind looks at the correct files (index.html and files in src/) for class names.

Step 3: Create Tailwind CSS Files

You need to set up Tailwind's base styles.

1. In the src folder, create a new file called index.css (or any name you prefer).

2. Add the following Tailwind directives to index.css:

   

Step 4: Import Tailwind CSS

To apply Tailwind styles globally in your app, import the index.css file into your src/main.jsx (or src/main.tsx if you're using TypeScript) like so:

Step 5: Start the Development Server

Finally, start the Vite development server to see everything in action:

Now, you should be able to use Tailwind CSS in your React components. You can start adding Tailwind utility classes in your JSX files to style your app.

Example of a Tailwind-styled Component:

That's it! You now have a Vite React project set up with Tailwind CSS. You can use this as a quick guide to setup Tailwind + React Project using Vite.

Thank you ~ PurnaChandra Bandaru.