樣式系統 (Styling)

Nuxt 4 與 Tailwind CSS v4 完美整合，提供了極致的開發體驗。本章將介紹如何建立可維護的 CSS 架構，以及如何善用現代 CSS 特性。

Tailwind CSS v4

Nuxt 4 專案預設支援 Tailwind CSS v4。與 v3 不同，v4 是一個從頭重寫的引擎，速度更快且無需 tailwind.config.js。

Zero Configuration

所有的設定都直接在 CSS 檔案中使用 @theme 區塊定義，不再需要 JavaScript 設定檔。

Native Engine

基於 Rust (Lightning CSS) 的解析引擎，編譯速度提升 10 倍以上。

在 assets/css/main.css 中設定主題：

assets/css/main.css

@import 'tailwindcss';

@theme {
  /* 自定義顏色 */
  --color-brand-500: oklch(0.7 0.15 150);
  
  /* 自定義動畫 */
  --animate-fade-in: fade-in 0.5s ease-out;
  
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

CSS 架構

在 Nuxt 專案中，我們建議將全域樣式保持在最低限度。

Utility-First

優先使用 Tailwind Utility Classes。這能確保樣式的一致性並減少 CSS Bundle 大小。

Component Abstraction

如果一組樣式重複出現 (例如按鈕)，請將其封裝為 Vue 元件 (AppButton.vue)，而不是建立 CSS Class。

元件樣式 (Scoped Styles)

當你需要撰寫無法用 Tailwind 表達的複雜樣式時，請使用 <style scoped>。

components/SpecialCard.vue

<template>
  <div class="card">
    <slot />
  </div>
</template>

<style scoped>
/* 這裡的樣式只會影響此元件 */
.card {
  /* 使用 Tailwind 的 theme() 函數存取變數 */
  background-color: theme('colors.slate.900');
  
  /* 複雜的 CSS 特性 */
  backdrop-filter: blur(12px);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
}
</style>