GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Installation
  • Editor setup
  • Compatibility
  • Upgrade guide
  • Styling with utility classes
  • Hover, focus, and other states
  • Responsive design
  • Dark mode
  • Theme variables
  • Colors
  • Adding custom styles
  • Detecting classes in source files
  • Functions and directives
  • Preflight

This view

  • Original page
  • New address

GeezerVison is showing tailwindcss.com — Installing with Vite - Installation

DocsPlayBlogShowcasePartnersPlus
  1. Getting Started
  2. Using Vite

Installation

Get started with Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Installation

  • Using Vite

  • Using PostCSS

  • Tailwind CLI

  • Framework Guides

  • Play CDN

Installing Tailwind CSS as a Vite plugin

Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.

01

Create your project

Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use Create Vite.

Terminal
npm create vite@latest my-projectcd my-project
02

Install Tailwind CSS

Install tailwindcss and @tailwindcss/vite via npm.

Terminal
npm install tailwindcss @tailwindcss/vite
03

Configure the Vite plugin

Add the @tailwindcss/vite plugin to your Vite configuration.

vite.config.ts
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({  plugins: [    tailwindcss(),  ],})
04

Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

CSS
@import "tailwindcss";
05

Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

Terminal
npm run dev
06

Start using Tailwind in your HTML

Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.

HTML
<!doctype html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="/src/style.css" rel="stylesheet"></head><body>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></body></html>
Are you stuck? Setting up Tailwind with Vite can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup.
Explore our framework guides
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.