setup-tailwind-typescript
정보
이 스킬은 Next.js/React 프로젝트에서 TypeScript와 함께 Tailwind CSS를 설정하며, 설치, 테마 커스터마이징, 타입 안전 유틸리티를 처리합니다. TypeScript 프로젝트에 Tailwind를 추가하거나 타입 안전 스타일링 패턴을 구축할 때 사용하세요. 완전한 TypeScript 통합과 함께 구성 설정, 플러그인 설치, 컴포넌트 스타일링을 다룹니다.
빠른 설치
Claude Code
추천npx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/setup-tailwind-typescriptClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
문서
設置 Tailwind CSS 與 TypeScript
於 TypeScript 項目中配置 Tailwind CSS，含自訂主題、工具與型別安全模式。
適用時機
- 為既有 TypeScript 項目加入 Tailwind CSS
- 為項目設計系統自訂 Tailwind 主題
- 設置型別安全之元件樣式模式
- 配置 Tailwind 外掛與擴展
輸入
- 必要：TypeScript 項目（Next.js、Vite 或獨立 React）
- 選擇性：設計系統 token（顏色、間距、字體）
- 選擇性：欲納入之 Tailwind 外掛
步驟
步驟一：安裝 Tailwind CSS
npm install -D tailwindcss @tailwindcss/postcss postcss
對 Next.js（若未含）：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
預期： tailwindcss、postcss 與 autoprefixer 已作為開發依賴安裝。對 Next.js，tailwind.config.ts 與 postcss.config.js 由 npx tailwindcss init -p 產生。
失敗時： 若 npx tailwindcss init 失敗，先以 npm install -D tailwindcss 安裝 Tailwind 再重試。若用 monorepo，自應用根目錄而非工作區根執行命令。
步驟二：配置 tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
primary: {
50: "#eff6ff",
100: "#dbeafe",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
900: "#1e3a5f",
},
secondary: {
500: "#6366f1",
600: "#4f46e5",
},
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
mono: ["JetBrains Mono", "monospace"],
},
spacing: {
"18": "4.5rem",
"88": "22rem",
},
},
},
plugins: [],
};
export default config;
預期： tailwind.config.ts 之 content 陣列符合項目文件位置，theme.extend 下有自訂顏色與字體，並以 Config 引入作適當之 TypeScript 類型化。
失敗時： 若自訂類別未渲染，驗證 content 路徑符合實際目錄結構。路徑為相對項目根之 glob 模式。缺路徑意指 Tailwind 不掃描該等文件之類別使用。
步驟三：設置全域樣式
編輯 src/app/globals.css：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
@apply antialiased;
}
body {
@apply bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100;
}
}
@layer components {
.btn-primary {
@apply bg-primary-600 text-white px-4 py-2 rounded-lg
hover:bg-primary-700 focus:outline-none focus:ring-2
focus:ring-primary-500 focus:ring-offset-2
transition-colors duration-200;
}
}
預期： globals.css 含三 Tailwind 指令（@tailwind base、@tailwind components、@tailwind utilities）加任何自訂之 base 與 component 層樣式。文件已於根佈局中引入。
失敗時： 若樣式未套用，驗證 globals.css 已於 layout.tsx（或 Pages Router 之 _app.tsx）中引入。檢查 Tailwind 指令存在且未被註解。
步驟四：建立型別安全之工具輔助
建立 src/lib/cn.ts：
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
安裝依賴：
npm install clsx tailwind-merge
於元件中之用法：
import { cn } from "@/lib/cn";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary" | "outline";
}
export function Button({ className, variant = "primary", ...props }: ButtonProps) {
return (
<button
className={cn(
"px-4 py-2 rounded-lg font-medium transition-colors",
variant === "primary" && "bg-primary-600 text-white hover:bg-primary-700",
variant === "secondary" && "bg-secondary-500 text-white hover:bg-secondary-600",
variant === "outline" && "border border-gray-300 hover:bg-gray-50",
className
)}
{...props}
/>
);
}
預期： src/lib/cn.ts 匯出 cn() 函數。clsx 與 tailwind-merge 已作為依賴安裝。元件用 cn() 合併類別名而無衝突。
失敗時： 若找不到 clsx 或 tailwind-merge，執行 npm install clsx tailwind-merge。若 TypeScript 於 cn.ts 報類型錯誤，驗證 ClassValue 類型自 clsx 引入。
步驟五：加入暗模式支援
更新 tailwind.config.ts：
const config: Config = {
darkMode: "class", // or "media" for system preference
// ... rest of config
};
切換實作：
"use client";
import { useEffect, useState } from "react";
export function ThemeToggle() {
const [dark, setDark] = useState(false);
useEffect(() => {
document.documentElement.classList.toggle("dark", dark);
}, [dark]);
return (
<button onClick={() => setDark(!dark)}>
{dark ? "Light" : "Dark"} Mode
</button>
);
}
預期： 暗模式於明暗主題間正確切換。dark 類別套用於 <html> 元素，dark: 前綴之工具類別對應響應。
失敗時： 若暗模式不切換，驗證 tailwind.config.ts 中 darkMode: "class" 已設。確保 dark 類別於 <html> 元素（非 <body>）切換。對系統偏好模式，改用 darkMode: "media"。
步驟六：加入外掛（選擇性）
npm install -D @tailwindcss/typography @tailwindcss/forms
// tailwind.config.ts
import typography from "@tailwindcss/typography";
import forms from "@tailwindcss/forms";
const config: Config = {
// ...
plugins: [typography, forms],
};
預期： 外掛已作為開發依賴安裝並於 tailwind.config.ts 之 plugins 陣列註冊。外掛提供之類別（如 typography 之 prose、forms 之樣式表單元素）於元件中可用。
失敗時： 若外掛類別未渲染，驗證外掛已安裝（npm ls @tailwindcss/typography）且加入 plugins 陣列。配置變更後重啟開發伺服器。
驗證
- Tailwind 類別於瀏覽器中正確渲染
- 自訂主題值（顏色、字體、間距）運作
-
cn()工具合併類別而無衝突 - 暗模式正確切換
- TypeScript 於配置或元件中無錯
- 生產建構清除未用樣式
常見陷阱
- content 路徑缺失：若類別未渲染，檢查配置中之
content陣列符合文件位置 - 類別衝突：用
tailwind-merge（經cn()）以防止衝突之工具類別 - 自訂值不運作：確保自訂值於
extend下（以加入）而非主題根（其取代預設） - 暗模式不切換：檢查
darkMode設定及dark類別於<html>而非<body>
相關技能
scaffold-nextjs-app- Tailwind 配置前之項目設置deploy-to-vercel- 部署已樣式之應用
GitHub 저장소
연관 스킬
executing-plans
디자인executing-plans 스킬은 검토 체크포인트가 포함된 통제된 배치로 실행할 완전한 구현 계획이 있을 때 사용합니다. 이 스킬은 계획을 불러와 비판적으로 검토한 후, 소규모 배치(기본값 3개 작업)로 작업을 실행하면서 각 배치 사이에 진행 상황을 아키텍트 검토를 위해 보고합니다. 이를 통해 내재된 품질 관리 체크포인트를 갖춘 체계적인 구현이 보장됩니다.
requesting-code-review
디자인이 스킬은 코드 변경 사항을 요구 사항에 따라 분석하기 위해 코드 리뷰어 하위 에이전트를 호출합니다. 작업 완료 후, 주요 기능 구현 후, 또는 메인 브랜치에 병합하기 전에 사용해야 합니다. 이 리뷰는 현재 구현체와 원래 계획을 비교하여 문제를 조기에 발견하는 데 도움이 됩니다.
connect-mcp-server
디자인이 스킬은 개발자들이 HTTP, stdio 또는 SSE 전송 방식을 통해 MCP 서버를 Claude Code에 연결하는 포괄적인 가이드를 제공합니다. GitHub, Notion 및 사용자 정의 API와 같은 외부 서비스를 통합하기 위한 설치, 구성, 인증 및 보안을 다룹니다. MCP 통합 설정, 외부 도구 구성 또는 Claude의 모델 컨텍스트 프로토콜 작업 시 활용하세요.
web-cli-teleport
디자인이 스킬은 작업 분석을 기반으로 개발자가 Claude Code 웹 인터페이스와 CLI 인터페이스 중 선택할 수 있도록 돕고, 두 환경 간 원활한 세션 텔레포트를 가능하게 합니다. 웹, CLI 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.