Tailwind CSS Installation & Project Setup - Complete Guide

Q: How does Tailwind CSS v4 configuration differ from v3?

v4 uses the native CSS @theme directive for configuration within stylesheets, while v3 uses a separate tailwind.config.js file. v4 is more aligned with CSS standards and has simpler configuration.

CDN Quick Start

The fastest way to try Tailwind CSS is through a CDN link — no build tools needed, just add it directly to your HTML file.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CDN Quick Start</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 flex items-center justify-center">
  <div class="bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold text-blue-600 mb-4">Hello Tailwind!</h1>
    <p class="text-gray-600">Quickly try Tailwind CSS via CDN</p>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing custom CSS classes and linking a stylesheet, while the Tailwind CDN method lets you start using all utility classes with just a single <script> tag.

⚠️ Note: The CDN approach is only suitable for learning and prototyping. For production, use a proper installation method.

Vite + PostCSS Standard Setup

For production projects, the Vite + PostCSS standard installation is recommended for the best build performance and development experience.

Example

BASH

npm create vite@latest my-tailwind-app -- --template vanilla
cd my-tailwind-app

npm install tailwindcss @tailwindcss/vite

npm run dev

▶ Try it Yourself

Configure the Tailwind plugin in vite.config.js:

JAVASCRIPT

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

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

Traditional CSS vs Tailwind Traditional projects require manually configuring PostCSS, Autoprefixer, and other plugins, while Tailwind v4 handles all configuration automatically through the Vite plugin.

@import "tailwindcss" Usage

Tailwind CSS v4 uses the @import syntax instead of the older @tailwind directives, aligning better with standard CSS specifications.

Example

Create the main stylesheet src/style.css:

CSS

@import "tailwindcss";

▶ Try it Yourself

Import it in your HTML:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import Usage Example</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body class="bg-gradient-to-r from-purple-500 to-pink-500 min-h-screen">
  <div class="container mx-auto p-8">
    <h1 class="text-4xl font-bold text-white text-center">
      Tailwind CSS v4
    </h1>
  </div>
</body>
</html>

Traditional CSS vs Tailwind The traditional approach requires writing many style rules in a CSS file, while Tailwind v4 brings in the entire utility framework with just one line: @import "tailwindcss".

tailwind.config Configuration Overview

Tailwind CSS v4 supports direct configuration through CSS files, eliminating the need for a separate JavaScript configuration file.

Example

Use the @theme directive in your CSS file to customize the theme:

CSS

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-family-heading: "Noto Sans SC", sans-serif;
}

▶ Try it Yourself

Using the custom theme:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Theme Configuration</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#10b981',
          }
        }
      }
    }
  </script>
</head>
<body class="min-h-screen p-8">
  <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-blue-700">
    Primary
  </button>
  <button class="bg-secondary text-white px-6 py-3 rounded-lg ml-4 hover:bg-green-700">
    Secondary
  </button>
</body>
</html>

Traditional CSS vs Tailwind The traditional approach requires defining CSS variables and referencing them throughout your code, while Tailwind's theme configuration directly generates corresponding utility classes, making them much more convenient to use.

VS Code Plugin Recommendations

Installing VS Code plugins can significantly boost your Tailwind CSS development productivity.

Essential Plugins

Tailwind CSS IntelliSense - Provides autocompletion, syntax highlighting, and hover previews
Prettier - Automatic formatting and class name sorting

Example

After installing the plugins, autocomplete suggestions appear as you type class names:

HTML

<div class="bg-blue-500">

<p class="text-lg font-semibold">

<div class="shadow-lg rounded-xl p-6">

▶ Try it Yourself

💡 Tip: Add the following settings to your VS Code configuration for a better development experience:

JSON

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false
}

Your First Tailwind Project

Let's create a complete Tailwind project to reinforce what we've learned.

Example

Full project structure and code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Tailwind Project</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-white shadow-sm">
    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">My Website</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Home</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">About</a>
        <a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
      </div>
    </div>
  </nav>

  <main class="max-w-7xl mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
          <p class="text-gray-600 text-sm">A card component built with Tailwind CSS.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-green-400 to-teal-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
          <p class="text-gray-600 text-sm">Responsive layout adapts to different screen sizes.</p>
        </div>
      </div>
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
        <div class="h-48 bg-gradient-to-br from-orange-400 to-red-500"></div>
        <div class="p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
          <p class="text-gray-600 text-sm">No custom CSS needed at all.</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing separate CSS files for navigation bars, cards, grids, and other components, while Tailwind accomplishes all styling directly in HTML using utility classes, dramatically improving development efficiency.

❓ FAQ

Q What's the difference between the CDN approach and a proper installation?

A The CDN approach loads the full Tailwind library (about 300KB) with all utility classes, suitable for development and prototyping. A proper installation generates CSS on-demand through build tools, typically producing only 10-20KB for production, offering better performance.

Q How does Tailwind CSS v4 configuration differ from v3?

A v4 uses the native CSS @theme directive for configuration within stylesheets, while v3 uses a separate tailwind.config.js file. v4 is more aligned with CSS standards and has simpler configuration.

Q Why doesn't my VS Code show Tailwind autocompletion?

A Make sure the Tailwind CSS IntelliSense plugin is installed and that editor.quickSuggestions.strings is enabled in your settings. If using the PostCSS installation, also ensure the correct configuration file exists in your project root.

Q Can I use Tailwind and custom CSS together?

A Yes. Tailwind is fully compatible with native CSS, and you can mix them as needed. However, it's recommended to prefer Tailwind utility classes to keep your code style consistent.

📖 Summary

Tailwind CSS offers both CDN and proper installation methods, suited for quick prototyping and production respectively
Vite + PostCSS is the recommended standard setup, providing the best build performance
Tailwind CSS v4 uses the @import "tailwindcss" syntax to import the framework
Customize theme colors and fonts via the @theme directive or CDN script configuration
The Tailwind CSS IntelliSense plugin for VS Code significantly boosts development efficiency
The first project demonstrated how to quickly build a responsive page with Tailwind

📝 Exercises

⭐ Use the CDN approach to create a simple page with a heading, paragraph, and button, applying at least 3 Tailwind utility classes to each element
⭐⭐ Install Tailwind CSS properly with Vite, create a page with a navigation bar and content area, and configure custom theme colors
⭐⭐⭐ Create a fully responsive card list page with custom theme configuration, hover effects, and different column counts at different screen sizes

Tailwind CSS Installation & Project Setup - Complete Guide

CDN Quick Start

Example

Vite + PostCSS Standard Setup

Example

@import "tailwindcss" Usage

Example

tailwind.config Configuration Overview

Example

VS Code Plugin Recommendations

Essential Plugins

Example

Your First Tailwind Project

Example

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好