메뉴
Tailwind CSS v4 最佳實踐指南。當需要設定 Tailwind、整合 Astro、設計元件樣式、實作 Dark Mode、或建立設計系統時使用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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 時使用。
| 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)