Menü
Tailwind CSS v4 最佳實踐指南。當需要設定 Tailwind、整合 Astro、設計元件樣式、實作 Dark Mode、或建立設計系統時使用。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | tailwind |
| description | Tailwind CSS v4 最佳實踐指南。當需要設定 Tailwind、整合 Astro、設計元件樣式、實作 Dark Mode、或建立設計系統時使用。 |
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* v4 — CSS-first，不需要 tailwind.config.js */
@import "tailwindcss";
| v3 | v4 |
|---|---|
bg-opacity-50 | bg-black/50 |
flex-shrink-* | shrink-* |
shadow-sm | shadow-xs |
outline-none | outline-hidden |
!flex | flex!（移至結尾） |
bg-[--var] | bg-(--var) |
tailwind.config.js | CSS @theme block |
瀏覽器需求：Safari 16.4+、Chrome 111+、Firefox 128+
npm install tailwindcss @tailwindcss/vite
// astro.config.mjs
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "astro/config";
export default defineConfig({
vite: { plugins: [tailwindcss()] },
});
/* src/styles/global.css */
@import "tailwindcss";
@theme {
--color-brand: oklch(0.65 0.25 250);
--font-heading: "Space Grotesk", system-ui, sans-serif;
}
---
// layouts/Layout.astro
import "../styles/global.css";
---
Astro <style> 中使用 @apply：
<style>
@reference "../../styles/global.css";
.btn { @apply rounded-lg bg-brand px-4 py-2 text-white; }
</style>
@theme {
/* Colors */
--color-base: #0a0a0f;
--color-surface: #161b22;
--color-accent: #7c3aed;
--color-gold: #ffd700;
/* Fonts */
--font-heading: "Space Grotesk", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Spacing */
--spacing-18: 4.5rem;
/* Animations */
--animate-fade-in: fade-in 0.4s ease;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
使用：bg-base、text-accent、font-heading、animate-fade-in
<div class="bg-white/5 backdrop-blur-xl border border-white/8 rounded-2xl shadow-2xl">
<!-- glass card -->
</div>
v4 預設使用 prefers-color-scheme：
@custom-variant dark (&:where(.dark, .dark *));
<div class="bg-white dark:bg-gray-900">...</div>
<span class="bg-gradient-to-r from-purple-500 via-cyan-400 to-amber-400 bg-clip-text text-transparent">
GitStar
</span>
<div class="transition-all duration-200 hover:-translate-y-1 hover:shadow-xl hover:border-white/15">
<div class="opacity-0 translate-y-5 transition-all duration-400" style="transition-delay: 50ms">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="@container">
<div class="@sm:flex @sm:gap-4">
tailwind.config.js — 用 @theme 取代@apply 在 Astro <style> 需要 @referencepurge 選項 — 自動 tree-shakebg-opacity-50 → bg-black/50!flex → flex!bg-[--var] → bg-(--var)Zod v4 schema validation 最佳實踐指南。當需要定義 schema、驗證/解析 JSON 資料、type inference、或處理 unknown data 時使用。
Svelte 5 + Astro 整合最佳實踐指南。當需要建立 Svelte 元件、使用 runes API、整合 Astro islands、或用 Testing Library 測試 Svelte 元件時使用。
GitHub GraphQL API 最佳實踐指南。當需要使用 GraphQL 查詢使用者資料、處理 cursor pagination、計算 rate limit、或除錯 GraphQL errors 時使用。
gayanvoice/top-github-users 架構參考指南。當需要了解 GitHub 使用者排行榜的資料抓取管線、國家設定、排行計算邏輯、已知問題、或社群需求時使用。
Commander.js v14 CLI 框架最佳實踐。當需要建立 CLI 工具、解析命令列參數、設計 subcommands 時使用。
GitHub Actions CI/CD 最佳實踐指南。當需要設定 workflow、cron 排程、GitHub Pages 部署、使用 Octokit API、或處理 rate limiting 時使用。