hairyf/tailwindcss

tailwindcss 是做什麼的？

Tailwind CSS 工具優先的 CSS 框架。適用於使用工具類別來設計網頁應用程式樣式、建立響應式設計或使用主題變數自訂設計系統時使用。

總覽

Turbo 使用此技能來安裝、設定並利用 Tailwind CSS 的功能，包括：

• 安裝 Tailwind CSS 及其依賴項（PostCSS、Autoprefixer）
• 產生 tailwind.config.js 和 postcss.config.js 設定檔
• 根據專案需求新增自訂主題變數、斷點和工具類別
• 使用 CSS 變數建立自訂顏色和設計 Token
• 使用 Tailwind 的響應式工具類別建立響應式設計
• 與元件庫和圖示庫整合

使用方式

<div class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 按鈕 </div>

響應式設計

<div class="text-center sm:text-left md:text-right lg:text-justify">響應式文字</div>

自訂主題

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0070f3',
        'brand-red': '#ff0000',
      },
      spacing: {
        '18': '4.5rem',
        '22': '5.5rem',
      }
    }
  }
}

安裝

npm install tailwindcss @tailwindcss/vite

設定

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

整合

搭配 Vite：

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

自訂樣式

使用 @apply 指令來擷取工具類別至自訂 CSS：

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

主題變數

@theme {
  --color-primary: #3490dc;
  --color-secondary: #ffed4a;
  --spacing-section: 3rem;
}