不再為 Tailwind 設定與響應式設計而煩惱。此技能提供 CSS 優先���式、容器查詢精通指南，以及現代化設計 token 架構，協助您使用 Tailwind CSS v4 建構可擴展的 UI。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「tailwind-patterns」。 Create a dark mode card component with container queries
預期結果:
- .card { @container; background: white; padding: var(--spacing-lg); }
- .dark .card { background: zinc-900; }
- @sm { .card-content { grid-template-columns: 1fr 1fr; } }
正在使用「tailwind-patterns」。 Set up design tokens with OKLCH colors
預期結果:
- @theme {
- --color-primary: oklch(0.7 0.15 250);
- --color-surface: oklch(0.98 0 0);
- --spacing-md: 1rem;
- }
安全審計
安全Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.
品質評分
你能建構什麼
從 Tailwind v3 升級至 v4
開發人員從 Tailwind v3 升級至 v4 時，需要以 CSS 優先的 @theme 指令取代 JavaScript config
建構響應式元件庫
UI 工程師建立可重複使用的元件，這些元件能根據其容器大小而非視口斷點進行調整
實作設計 token 系統
團隊使用 OKLCH 與 CSS 變數建立語義化色彩、間距與排版比例
試試這些提示
建立一個 Tailwind v4 @theme 配置，包含主要品牌色彩、間距比例與 [專案類型] 的字體堆疊
使用容器查詢設計一個響應式 [元件類型]，能從窄容器適配至寬容器
使用 [class/media/selector] 策略為 [頁面類型] 實作深色模式，並搭配正確的色彩 token
使用 [flexbox/grid] 建立一個 [版面類型]，包含響應式斷點與非對稱 Bento 風格區塊
最佳實務
- 在 Tailwind v4 中使用 CSS 優先的 @theme 指令取代 tailwind.config.js，以獲得更好的效能與原生 CSS 變數支援
- 優先使用容器查詢（@container）進行��件層級的響應式設計，而非視口斷點，以建立可重複使用且與上下文獨立的元件
- 將 design tokens 組織為三層：原始色彩（原始值）、語義 token（primary、surface）與元件 token（button-bg）
- 使用行動優先方式，撰寫無前綴的基礎樣式，然後為較大畫面新增 sm:、md:、lg: 覆寫
- 當 class 組合重複 3 次以上或需要複雜狀態變體時，擷取為元件
避免
- 避免到處使用任意值—使用設計系統比例值以保持一致性，而非像 w-[327px] 這樣的硬編碼數字
- 不要使用 !important 覆寫樣式—透過正確的元件結構與 CSS 層級來解決特異性問題
- 避免行內樣式屬性—改用 Tailwind utility classes 以維持設計系統一致性
- 不要混用 v3 JavaScript config 與 v4 CSS 優先模式—完全遷移至 @theme 指令與基於 CSS 的配置
- 避免過度使用 @apply 指令—對於動態行為偏好使用 React/Vue 元件，對於靜態模式則使用純 CSS 元件