Installing Tailwind CSS

There are multiple ways to integrate Tailwind CSS into your project, but the most recommended and feature-rich approach is installing it as a PostCSS plugin. This method allows you to leverage all of Tailwind's features, such as @apply, @theme directives, and custom configuration.

This chapter will use a typical Vite project as an example to show how to install and configure Tailwind CSS.

Step 1: Create a Project

First, ensure you have a project. If you're starting from scratch, you can create a Vite project:

# Using NPM
npm create vite@latest my-project -- --template vue

# Using Yarn
yarn create vite my-project --template vue

cd my-project

Step 2: Install Tailwind CSS

In your project directory, install tailwindcss and its peer dependencies postcss and autoprefixer via npm.

npm install -D tailwindcss postcss autoprefixer

• tailwindcss: Tailwind CSS core library.
• postcss: A tool for transforming CSS with JavaScript, which Tailwind is built upon.
• autoprefixer: A PostCSS plugin that automatically adds CSS vendor prefixes for you.

Step 3: Generate Configuration Files

Next, run the init command to generate the tailwind.config.js and postcss.config.js configuration files.

npx tailwindcss init -p

• tailwind.config.js: Tailwind's main configuration file where you can customize colors, fonts, spacing, etc.
• postcss.config.js: PostCSS configuration file.

After running the command, these two files will be generated in your project's root directory.

Step 4: Configure Template Paths

Open the tailwind.config.js file and configure the paths to all your template files in the content array. Tailwind's JIT engine will scan these files to determine which CSS classes need to be generated.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}", // Match all relevant files in the src directory
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Include Tailwind in CSS

In your main CSS file (for Vite + Vue projects, this is typically src/style.css or src/assets/main.css), use the @tailwind directives to inject Tailwind's base, components, and utilities styles.

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base: Injects Tailwind's base styles and style reset (Preflight).
• @tailwind components: Injects Tailwind's component classes.
• @tailwind utilities: Injects Tailwind's utility classes.

Finally, ensure you import this CSS file in your application's entry point (like src/main.js).

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './style.css' // Import CSS file

createApp(App).mount('#app')

Step 6: Start Development Server

Now, run your build process and start the development server.

npm run dev

Open your App.vue or index.html and try adding some Tailwind classes, such as text-3xl font-bold underline. If the styles work, congratulations - Tailwind CSS has been successfully integrated into your project!