Installation

Get started with Tailwind CSS in your project. Tailwind 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.

Quick Start with Vite#

Install Tailwind CSS and its peer dependencies via npm:

npm install -D tailwindcss @tailwindcss/vite

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

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import Tailwind in your CSS#

Add the @import "tailwindcss"; directive to your main CSS file:

@import "tailwindcss";