How to Configure Tailwind CSS with Vite for Vanilla JavaScript Projects

Install Tailwind CSS as a dev dependency, configure the content paths in tailwind.config.js to scan your HTML and JavaScript files, and import your stylesheet in main.js to enable utility-first styling in a vanilla JavaScript Vite project.

The tailwindlabs/tailwindcss repository provides a PostCSS plugin that integrates seamlessly with Vite's built-in CSS processing pipeline. For vanilla JavaScript projects, this combination delivers Hot Module Replacement (HMR) for rapid development and efficient production builds with automatic CSS purging. This guide covers the essential configuration steps to connect Tailwind's utility framework with Vite's native tooling.

Initialize Your Vite Project

Create a new Vite project using the official vanilla JavaScript template. This sets up the basic file structure without framework-specific boilerplate:

npm create vite@latest my-tailwind-project -- --template vanilla
cd my-tailwind-project
npm install

This generates a standard project structure containing index.html, main.js, and style.css files in your project root.

Install Tailwind CSS Dependencies

Install Tailwind CSS and its peer dependencies as development dependencies. Vite has native PostCSS support, allowing Tailwind to function without additional build configuration:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The npx tailwindcss init -p command creates tailwind.config.js and postcss.config.js files. Vite automatically detects the PostCSS configuration and applies it to all CSS imports during both development and production builds.

Configure Content Paths in tailwind.config.js

Edit the generated tailwind.config.js file to specify which files Tailwind should scan for utility class names. For vanilla JavaScript projects, include your HTML entry point and all JavaScript files:

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

The content array is critical for Tailwind's just-in-time compiler to generate only the CSS classes you actually use. Ensure these glob patterns match your actual file structure to prevent missing styles in production.

Add Tailwind Directives to Your CSS

Replace the contents of your style.css file (or create src/style.css) with the three Tailwind directives. These inject Tailwind's base reset, component classes, and utility classes:

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

When Vite processes this file through its PostCSS pipeline, Tailwind replaces these directives with the generated CSS based on the classes found in your configured content paths.

Import CSS in Your JavaScript Entry Point

In your main.js file, import the CSS file to ensure Vite includes it in the dependency graph and processes it through PostCSS:

import './style.css'

// Your vanilla JavaScript code here
document.querySelector('#app').innerHTML = `
  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
    <div class="text-xl font-medium text-black">Tailwind Works!</div>
  </div>
`

This import statement triggers Vite’s CSS handling, which automatically runs the file through the Tailwind PostCSS plugin and enables HMR for instant style updates.

Development and Production Workflow

Start the development server to utilize Vite's HMR with Tailwind CSS:

npm run dev

Vite watches your JavaScript and HTML files for changes. When you add or remove Tailwind utility classes, the browser updates instantly without losing application state.

For production builds, run:

npm run build

Vite processes your CSS through PostCSS, Tailwind purges unused utility classes based on your content configuration, and Autoprefixer adds vendor prefixes. The resulting CSS bundle contains only the styles actually used in your application.

Summary

• Initialize a Vite project with the vanilla template to create a framework-free foundation.
• Install Tailwind CSS, PostCSS, and Autoprefixer as dev dependencies.
• Configure tailwind.config.js with accurate content paths pointing to your HTML and JavaScript files.
• Import your CSS file in main.js to connect Tailwind to Vite's processing pipeline.
• Develop using npm run dev to leverage instant HMR for CSS and JavaScript changes.
• Build using npm run build to generate optimized, purged CSS for production deployment.

Frequently Asked Questions

Do I need a separate PostCSS configuration file when using Tailwind with Vite?

While the npx tailwindcss init -p command generates a postcss.config.js file, Vite has built-in PostCSS support and automatically detects this configuration. You can alternatively define PostCSS configuration directly in vite.config.js using the css.postcss option, though maintaining a separate postcss.config.js file is the standard convention for Tailwind projects.

Why are my Tailwind classes not appearing in the browser?

This issue typically stems from misconfigured content paths in tailwind.config.js. Ensure your content array includes glob patterns that match your project structure, such as "./index.html" and "./src/**/*.{js,ts}". Also verify that your CSS file is properly imported in main.js and that the file contains the @tailwind directives.

Can I use Tailwind CSS plugins like Typography or Forms with Vite and vanilla JS?

Yes, install the plugin via npm and add it to the plugins array in your tailwind.config.js file. Vite's PostCSS integration processes these plugins automatically during the build. The generated CSS will include the plugin's styles alongside your utility classes without requiring additional Vite configuration.

Is Autoprefixer required when using Tailwind CSS with Vite?

Autoprefixer is recommended as a peer dependency of Tailwind CSS to add vendor prefixes for browser compatibility. While Tailwind handles the utility generation, it does not add vendor prefixes by default. Vite's pipeline runs Autoprefixer automatically if it is configured in your postcss.config.js, ensuring your production CSS works across different browsers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}