How to Setup React and Tailwind CSS with Vite in a Project

React and Tailwind CSS are two of the most popular tools in web development today. React is a JavaScript library for building user interfaces, while Tailwind is a utility-first CSS framework for rapidly building custom designs. Vite is a new breed of frontend build tool that aims to provide a faster and leaner development experience for modern web projects.

In this guide, I‘ll show you how to quickly set up a project with React, Tailwind CSS, and Vite. We‘ll cover everything from creating a new project to deploying for production. By the end, you‘ll have a solid starting point for building your own applications with this powerful tech stack.

Prerequisites

Before we get started, make sure you have the following installed on your machine:

• Node.js (v12 or higher) and NPM
• A code editor – I recommend Visual Studio Code
• Basic familiarity with the command line

You don‘t need prior experience with React, Tailwind CSS, or Vite, but it helps to have some knowledge of HTML, CSS, and JavaScript.

Creating a New Vite Project with React

There are a few ways to set up a React project, such as using Create React App. However, we‘ll be using Vite in this tutorial for its superior development experience.

To create a new Vite project, open up your terminal and navigate to the directory where you want to create your project. Then run the following command:

npm create vite@latest my-project -- --template react

This will prompt you to enter a project name and choose a template. Let‘s call our project "my-project" and select the React template.

Once the installation is complete, navigate into your new project‘s directory:

cd my-project

Now open the project in your code editor. You‘ll see a basic folder structure like this:

my-project/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── logo.svg
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js

The src folder is where most of your React code will live. The entry point to the application is main.jsx, which renders the root App component to the DOM.

Vite is configured via the vite.config.js file in the project root. This is where you can customize Vite‘s behavior and add any necessary plugins.

Installing and Configuring Tailwind CSS

Now let‘s add Tailwind CSS to our project. Tailwind is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build designs without any annoying opinionated styles you have to fight to override.

Install Tailwind and its peer-dependencies using NPM:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Next, generate your Tailwind configuration file:

npx tailwindcss init -p

This command creates a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or ‘media‘ or ‘class‘
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

We need to configure Tailwind to remove unused styles in production. Update the purge option in the config file:

// tailwind.config.js
module.exports = {
  purge: [‘./index.html‘, ‘./src/**/*.{js,ts,jsx,tsx}‘],
  // ...
}

This tells Tailwind to look for any used classes in our template files and remove any unused ones when building for production.

Finally, add the Tailwind directives to your CSS. Open src/index.css and add the following at the top of the file:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

These directives inject Tailwind‘s base, components, and utilities styles into your CSS.

Running the Development Server

Now that everything is set up, let‘s run our application in development mode:

npm run dev

This command starts the Vite development server. You should see output similar to this in your terminal:

vite v2.3.8 dev server running at:

Local: http://localhost:3000/
Network: use --host to expose

ready in 369ms.

Open http://localhost:3000 in your browser and you‘ll see the default React page with the Vite logo.

Vite provides an extremely fast development server with Hot Module Replacement (HMR). This means that when you make changes to your code, the changes are instantly reflected in the browser without a full page reload. HMR even preserves your component state between updates.

Building and Styling a Component

Let‘s create a sample component to see Tailwind in action. Create a new file src/Button.jsx with the following code:

// src/Button.jsx
export default function Button({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  );
}

This creates a simple button component that accepts a children prop to render inside the button. We‘ve used Tailwind‘s utility classes to style the button with a blue background, white text, and some padding and rounding.

Now let‘s use our new component in the App component. Open src/App.jsx and replace the contents with the following:

// src/App.jsx
import Button from ‘./Button‘;
function App() {
return (
<div className="max-w-md mx-auto mt-8">
<h1 className="text-4xl font-bold mb-4">Hello, Tailwind!</h1>
<Button>Click me</Button>
</div>
);
}
export default App;

Here we‘ve imported our Button component and added it to the JSX. We‘ve also used some Tailwind classes to limit the width of the content, center it on the page, and add some margin to the top.

Save the file and check your browser – you should see the updated page with a heading and a styled button.

That‘s the basic idea of using Tailwind with React components. You can add any Tailwind classes to your JSX elements to style them. Tailwind also provides responsive utility variants, so you can easily change styles based on screen size:

<div className="bg-blue-500 md:bg-red-500 lg:bg-green-500">
  Screen width dependent background color
</div>

You can also customize your Tailwind theme by editing the tailwind.config.js file. Here you can define your own colors, fonts, spacing, and more. Refer to the Tailwind configuration docs to learn more.

Optimizing for Production

When you‘re ready to deploy your application, you can create a production build with the following command:

npm run build

This will generate an optimized bundle in the dist folder, ready to be deployed to your hosting provider.

Vite automatically handles code splitting, asset optimization, and lazy loading out of the box to ensure your application loads as fast as possible.

If your application has static assets like images, you can place them in the public directory. Files in public are served at the root path / during dev, and copied to the root of the dist directory as-is during build.

To preview your production build locally, you can run:

npm run serve

This will start a local server that serves your dist folder.

Deploying Your Application

Deploying a Vite application is pretty straightforward, as the production build is a simple static site. You can deploy it to any static hosting service like GitHub Pages, Netlify, or Vercel.

The only thing to watch out for is that you might need to configure Vite‘s base option if your site is deployed to a subdirectory. This ensures that asset paths are relative to the base path instead of the root:

// vite.config.js
export default {
  base: ‘/my-project/‘,
}

Refer to the Vite deployment guide for more details.

Next Steps

Congratulations, you now have a fully functional React application styled with Tailwind CSS, built with Vite!

Some next steps you can explore:

• Add more pages and components to your application
• Integrate a navigation library like React Router
• Try out some of the official Tailwind CSS Components
• Explore the Vite plugin ecosystem for tools like linting, testing, PWAs, and more
• Read the Vite documentation to learn about its many features and configuration options

The combination of React, Tailwind CSS, and Vite provides a modern, efficient, and enjoyable way to build web interfaces. I hope this guide has helped you get up and running quickly. Happy coding!