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

Tailwind CSS is a popular CSS framework, and React is one of the most popular JavaScript libraries.

And Tailwind CSS and React are a great combo to use if you’re building a frontend project.

In this article, you will learn how to setup your coding environment with Vite, install React and Tailwind CSS with their latest versions, and start building your projects right away.

We will be using these tools:

• VSCode for our code editor
• Node.js for our package manager
• Vite for our development environment

If you don’t have these tools installed, you can do so by clicking the links for each one above.

After setting up Node.js for your VSCode, you can now use Node.js to install Vite for your project using the terminal.

Step 1 – Create Your Project Folder

Open your terminal, and navigate to the folder where you want to build your project – for example Desktop. Input the command below in the terminal and click enter:

‌

npm create vite@latest your-project-name -- --template react

Step 2 – Navigate to Your Project Folder

Input the command below in your terminal and click enter:

cd food-app

Step 3 – Install Tailwind CSS and Other Dependencies

Input the command below in your terminal and click enter:

npm install -D tailwindcss postcss autoprefixer

Step 4 – Generate the Configuration Files

Input the command below in your terminal and click enter:

npx tailwindcss init -p

Step 5 – Configure Source Paths

Add the paths to all of your template files in your tailwind.config.cjs file. Template files include HTML templates, JavaScript components, and other source files that contain Tailwind class names. This is to make sure that vanilla CSS is generated for the corresponding elements.

Your tailwind.config.cjs looks like this for now:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

"./index.html",

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

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

Step 6 – Add Tailwind Directives to Your CSS

Tailwind directives are custom Tailwind-specific statements that instruct CSS how to behave. You’ll need to add directives for three of Tailwind’s layers.

@tailwind base injects Tailwind’s base styles and base styles registered by plugins, @tailwind components injects Tailwind’s component classes and component classes registered by plugins, while @tailwind utilities injects Tailwind’s utility classes and utility classes registered by plugins.

Add the statements below to your ./src/index.css file:

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