Tailwind CSS Setup and Initialization

18.1.1. Dependency Installation

The following packages must be installed to adopt Tailwind CSS v3 in a project.

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p --ts

The package.json devDependencies must include the following entries.

{
  "devDependencies": {
    "tailwindcss": "^3.4.0",
    "postcss": "^8.4.0",
    "autoprefixer": "^10.4.0"
  }
}

• tailwindcss must use version 3.x.
• postcss and autoprefixer are required companion dependencies for Tailwind CSS.
• The --ts flag is used to generate a TypeScript-based configuration file.

---

18.1.2. tailwind.config.ts

The tailwind.config.ts file must be located at the project root.

import type { Config } from 'tailwindcss'

export default {
  content: [
    './index.html',
    './src/**/*.{vue,ts,tsx,js,jsx}',
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          100: '#e0ebff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Pretendard', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      spacing: {
        '4.5': '1.125rem',
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
} satisfies Config

Item	Configuration Principle
content	Must include both Vue files and TypeScript files
theme.extend	Extends project-specific values while preserving default theme
Direct theme modification	Must not be used as it overwrites default values
plugins	Third-party plugins must be added only after team consensus

---

18.1.3. PostCSS Configuration

Create a postcss.config.js file at the project root.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• The tailwindcss plugin must be registered before autoprefixer.
• Additional PostCSS plugins should be placed after autoprefixer.
• Vite automatically detects PostCSS configuration, so no additional integration is required.

---

18.1.4. Global CSS Structure

Declare Tailwind directives in the src/styles/main.css file.

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

Use @layer to control the priority of custom styles.

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

@layer base {
  html {
    @apply text-gray-900 bg-white antialiased;
  }
  body {
    @apply min-h-screen;
  }
}

@layer components {
  .btn-base {
    @apply inline-flex items-center justify-center rounded-md font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

• @layer base is used for default HTML element style resets.
• @layer components is used for defining reusable component classes.
• @layer utilities is used for adding custom utilities not available in Tailwind.
• main.css must be imported at the top level in src/main.ts.

// src/main.ts
import './styles/main.css'
import { createApp } from 'vue'
import App from './App.vue'

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