Effortlessly Add Tailwind CSS to Your Vite and Vanilla JS Project: A Step-by-Step Guide with a Bonus Testing Example

2 min readJan 15, 2023

Tailwind CSS is a popular utility-first CSS framework that can be easily added to any project to quickly and easily create beautiful, responsive designs. In this article, we’ll go over the steps to add Tailwind CSS to a Vite and Vanilla JS project and an example of how to test that Tailwind CSS is working.

Step 1: Install Tailwind CSS

The first step is to install Tailwind CSS in your project. You can do this by running the following command in your terminal:

npm install tailwindcss

Step 2: Create a Tailwind CSS configuration file

Next, you’ll need to create a Tailwind CSS configuration file. This file is where you can customize the default settings of Tailwind CSS to suit your project’s needs.

To create a configuration file, you can run the following command in your terminal:

npx tailwind init

This will create a tailwind.config.js file in your project's root directory.

Step 3: Add Tailwind CSS to your CSS

Next, you’ll need to add Tailwind CSS to your CSS. You can do this by importing the Tailwind CSS styles in your CSS file.

Here’s an example of what your CSS file might look like with Tailwind CSS added:

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

Step 4: Import CSS into your JavaScript

To use Tailwind CSS in your JavaScript you will need to import the CSS file you created in Step 3.

Here’s an example of how you might do this in your JavaScript file:

import './styles.css'

Step 5: Build and Run

Finally, you can build and run your project to see the changes.

npm run build

Vite with Vanilla JS will detect the changes and update the browser, you can see the styles applied to your page.

Example of index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My Project</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header class="bg-blue-500 text-white p-4">
      <h1 class="text-2xl">Welcome to my project!</h1>
    </header>
    <main class="p-4">
      <p class="text-gray-800">
        This is a simple example of how to use Tailwind CSS in your project.
      </p>
      <div class="bg-gray-300 p-4 rounded-lg">
        <button class="bg-green-500 text-white p-2 rounded-lg hover:bg-green-600">Click me</button>
      </div>
    </main>
    <footer class="bg-blue-500 text-white p-4">
      <p>Copyright ©2022 My Project</p>
    </footer>
  </

Effortlessly Add Tailwind CSS to Your Vite and Vanilla JS Project: A Step-by-Step Guide with a Bonus Testing Example

Written by Hesh Ramsis ( Hesham El Masry 77 )