# How to Configure Tailwind CSS with Vite for Vanilla JavaScript Projects > Learn how to configure Tailwind CSS with Vite for vanilla JavaScript projects. Quickly add utility-first styling to your Vite JS applications without frameworks. - Repository: [Tailwind Labs/tailwindcss](https://github.com/tailwindlabs/tailwindcss) - Tags: how-to-guide - Published: 2026-02-11 --- **Install Tailwind CSS as a dev dependency, configure the content paths in [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) to scan your HTML and JavaScript files, and import your stylesheet in [`main.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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: ```bash npm create vite@latest my-tailwind-project -- --template vanilla cd my-tailwind-project npm install ``` This generates a standard project structure containing [`index.html`](https://github.com/tailwindlabs/tailwindcss/blob/main/index.html), [`main.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/main.js), and [`style.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/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: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` The `npx tailwindcss init -p` command creates [`tailwind.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) and [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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: ```javascript /** @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`](https://github.com/tailwindlabs/tailwindcss/blob/main/style.css) file (or create [`src/style.css`](https://github.com/tailwindlabs/tailwindcss/blob/main/src/style.css)) with the three Tailwind directives. These inject Tailwind's base reset, component classes, and utility classes: ```css @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`](https://github.com/tailwindlabs/tailwindcss/blob/main/main.js) file, import the CSS file to ensure Vite includes it in the dependency graph and processes it through PostCSS: ```javascript import './style.css' // Your vanilla JavaScript code here document.querySelector('#app').innerHTML = `
Tailwind Works!
` ``` 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: ```bash 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: ```bash 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`](https://github.com/tailwindlabs/tailwindcss/blob/main/tailwind.config.js) with accurate content paths pointing to your HTML and JavaScript files. - **Import** your CSS file in [`main.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/vite.config.js) using the `css.postcss` option, though maintaining a separate [`postcss.config.js`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/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`](https://github.com/tailwindlabs/tailwindcss/blob/main/postcss.config.js), ensuring your production CSS works across different browsers.