Install Tailwind CSS With Vite for Vanilla.js

Tailwind CSS, with its utility-first approach, makes styling web applications fast and efficient. Pairing it with Vite, a modern build tool, enhances your development workflow. This guide will show you how to set up Tailwind CSS with Vite for a Vanilla.js project.

If you prefer using the Tailwind CLI, you can check out our other guide here.

To install Tailwind CSS with Vite, follow these steps:

1. Create a new Vite project:

npm create vite@latest vite-project -- --template vanilla
cd vite-project

2. Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

3. Generate Tailwind configuration files:

npx tailwindcss init -p

4. Edit tailwind.config.js as follows:

tailwind.config.js

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

5. Add Tailwind directives to your CSS: Create a new file src/style.css (or use your existing style.css CSS file) and add:

CSS

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

6. Import the CSS file in your main JavaScript file: In src/main.js, or main.js add:

import './style.css'

Remove all existing in index.html and add below code.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla Tailwind CSS </title>
    <script type="module" src="main.js" defer></script>
  </head>
  <body class="h-screen flex items-center justify-center">
    <div class="bg-white p-8 rounded shadow-md">
      <h1 class="text-2xl font-semibold mb-4">Welcome to Tailwind CSS!</h1>
      <p class="text-gray-700">
        Tailwind CSS is a utility-first CSS framework that helps you quickly
        build modern and responsive user interfaces.
      </p>
      <button
        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Get Started
      </button>
    </div>
  </body>
</html>

Run the Development Server

npm run dev
#or
npm run build

saim ansari