How to setup Tailwind CSS with Vite ?
Last Updated :
24 Jun, 2024
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
- Create a folder and name it as desired.
- 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
- Open the terminal in the project’s root directory.
- Run the following command to generate an empty npm project:
npm init -y
Step 3: Installing tailwind CSS along with vite.js
- 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
- The below command will generate 2 config files named postcss.config.js and tailwind.config.js.
npx tailwindcss init -p
postcss.config.js
JavaScript
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Step 5: Adding Tailwind directives
- 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
- 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.
JavaScript
// Older version of tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Line to update
content: ["*"],
After updating the tailwind.config.js file:
JavaScript
// After update
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Setup Tailwind-CSS with Vite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex justify-center
items-center min-h-screen ">
<div class="bg-green-700 p-8 text-3xl
rounded-2xl shadow-2xl">
GeeksforGeeks Learning!
</div>
</div>
</body>
</html>
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.
Similar Reads
How to use Tailwind CSS with Next.js Image ?
Integrating Tailwind CSS with Next.js enables you to style your application efficiently using utility-first CSS. When combined with the Next.js Image component, you can create responsive and optimized images with ease and consistency. In this article, we will learn how to use Tailwind CSS with Next.
3 min read
How to use Tailwind CSS with Django ?
Tailwind CSS has gained immense popularity among developers for its utility-first approach to styling web applications. Django on the other hand is a robust and flexible web framework written in Python. Combining these two powerful tools can enhance your Django projects. In this article, we will exp
4 min read
How to use CSS variables with TailwindCSS ?
Tailwind CSS  allows users to predefined classes instead of using the pure CSS properties. We have to install the Tailwind CSS.  Create the main CSS file (Global.css) which will look like the below code. Global.css: In the following code, the entire body is wrapped into a single selector. The entir
1 min read
How to use Tailwind CSS with esbuild ?
Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
3 min read
How to style HTML Tables with Tailwind CSS ?
TailwindCSS offers utilities to make tables visually appealing. The colored header table emphasizes visual hierarchy through background color, while the stripped row table improves readability with alternating row colors. Similarly, the hover effect table enhances user interaction by applying visual
5 min read
How to setup Tailwind 3 in React with CRA 5 ?
In this article, we will see how to set up Tailwind 3 in React with CRA 5, but before that, we need some basic ideas about these technologies. React JS: A free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook.TailwindCSS: A high
3 min read
How to Make A Pop-Up Window With Tailwind CSS?
A pop-up window is a small box that appears on your webpage, showing extra information or options without leaving the current page. A pop-up window for a website should be interactive, simple & good in UI. we will learn how to make a pop-up window with HTML & Tailwind CSS and simple JavaScri
4 min read
How to Add Tailwind CSS to HTML ?
Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows. Integration Options: CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm:
3 min read
How to setup ReactJs with Vite ?
Vite is a fast and modern build tool for creating web applications. It increases the development process by providing faster build times and better performance. Some of the benefits of using React with Vite are mentioned below: Fast updates without page reloads.Faster and smaller production builds.A
3 min read
Tailwind CSS Ring Offset Width
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. This class is used to set the ring-offset width of buttons. Ring Offset Width classes: ring-offset-0: This class is used to deny the ring-offset.ring-offset-1: This class is used to set the smallest
1 min read