Vite + React + Tailwind CSS

Vite is a new building tool how improve the developer experience for development with the local machine and for the build of optimized assets for production.

Initialization Application

1npm init @vitejs/app

Setup Application

You can use the scaffold to setup the Vite app, with React templates.

The following command will:

1# NPM 7+, extra double-dash is needed:
2npm init @vitejs/app vite-react-tailwindcss --template react
3
4# Enter in the new directory:
5cd vite-react-tailwindcss
6
7# install NPM packages:
8npm install

Vite is installed and ready to use, let take a look in package.json file.

Here is the default NPM scripts in a scaffolded Vite project:

1{
2    "scripts": {
3        "dev": "vite", // start dev server
4        "build": "vite build", // build for production
5        "serve": "vite preview" // locally preview production build
6    }
7}

Next step run application npm run dev.

You are now able to open application in the browse: http://localhost:3000/

TailwindCSS

Let's stop server and continue the configuration.

1npm install tailwindcss@latest postcss@latest autoprefixer@latest

Create configuration files

Next, generate your tailwind.config.js and postcss.config.js files:

1npx tailwindcss init -p

Include Tailwind in your CSS

TailwindCSS is installed in application.

To include them you need to create CSS file:

1touch src/tailwind.css

Now you need to use the @tailwind directive to include Tailwind's base, components, and utilities styles.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Finally, ensure that CSS file is being imported in your ./src/App.tsx file:

1import React from 'react';
2import './tailwind.css';
3
4function App() {
5    return (
6        <div>
7            <p className="text-red-500">Vite + React + TailwindCSS</p>
8        </div>
9    );
10}
11
12export default App;

Application configuration are finished.

Now when you run npm run dev, Tailwind CSS will be ready to use in your application.

If you want you can check the whole code in this repository.