Tailwind CSS Setup

Add Tailwind CSS utility-first CSS framework to your project.

Beginner10 min

Setup Steps

1. Install Tailwind CSS v4 for Vite projects:

npm install -D tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.ts:

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [tailwindcss()]
})

3. Add to your CSS file (@/index.css):

@import "tailwindcss";

4. Tailwind CSS v3 setup (alternative):

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

5. tailwind.config.js configuration (v3):

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

6. Add to CSS file (v3):

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

7. Usage examples:

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <p class="text-gray-600">Description text</p>
</div>

8. VS Code extension: Tailwind CSS IntelliSense

Related Guides

Deploy to Vercel

Deploy your Next.js or React project to the Vercel platform.

Deploy to Netlify

Deploy your static site or JAMstack project to Netlify.

Bun Runtime Setup

Install the Bun JavaScript/TypeScript runtime. A fast alternative to Node.js.

Deno Setup

Install the Deno JavaScript/TypeScript runtime. A secure and modern alternative.