How to setup Tailwind CSS with Vite ?

Tailwind CSS is a popular CSS framework that simplifies the process of designing user interfaces with its utility-first approach. Vite is a build tool that provides a fast development experience for modern web projects. Together, they make front-end development efficient and enjoyable.

In this article, we will walk through the steps to set up Tailwind CSS with a Vite.js application. Before you start, ensure that you have Node.js and npm installed. If not, refer to the installation guides for Node.js on Windows/Linux.

Steps to Install Tailwind CSS with Vite.js

Follow the below steps to set up a tailwind CSS with the Vite.js application:

Step 1: Create a project folder

1. Create a folder and name it as desired.
2. Inside the folder, create an HTML file and add the boilerplate code (type ! and press enter if using Emmet).

Step 2: Install npm necessary files

1. Open the terminal in the project’s root directory.
2. Run the following command to generate an empty npm project:

npm init -y

Step 3: Installing tailwind CSS along with vite.js

1. Run the following command on the terminal to install all the tailwind dependencies through vite. This command will create a node_modules folder and package-lock.json file.

npm install -D tailwindcss postcss autoprefixer vite

Step 4: Create Tailwind config file

1. The below command will generate 2 config files named postcss.config.js and tailwind.config.js.

npx tailwindcss init -p

postcss.config.js

tailwind.config.js

Step 5: Adding Tailwind directives

1. Now, create a style.css file, and inside that file, add the layer directives of tailwind CSS. Once all the layer directives will be added in style.css, now, link the style.css file into your HTML file using the <link> tag.

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

Step 6: Updates in package.json

1. We have created a package.json file (in step 2). This file contains important metadata about your project and records your dependencies. 

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },

2. Change the above lines of code with the lines below and don't forget to add a comma at the end.

"scripts": {
   "start": "vite"
 },

Step 7: Configure template paths

We need to update the content in the tailwind.config.js file so that it will apply tailwind-CSS in all the files.

Line to update

content: ["*"],

After updating the tailwind.config.js file:

Step 8: Check project structure

Check the project structure and all the necessary files. 

Step 9: Run the application

To run the application use the command npm run start into the terminal.

npm run start

The above line of code will generate a localhost server, & follow the server link to open the application on the web browser.

Step 10: Test Tailwind CSS with an example

Now that we have successfully set up the tailwind-CSS and understand how to run the application, now, we will test with a simple example.

Example: This example illustrates the successful execution of code after setup Tailwind-CSS with Vite application.

Output: To run the application use npm run start into the terminal.

Setting up Tailwind CSS with Vite provides a streamlined development experience, allowing you to focus on creating beautiful, responsive designs. By following the steps outlined in this guide, you can quickly set up and start using Tailwind CSS with Vite, ensuring your web applications are built efficiently and effectively.