setup-tailwind-typescript

pjt222

업데이트됨 2 days ago

8 조회

디자인reactaidesign

정보

이 스킬은 Next.js 또는 React 프로젝트에서 Tailwind CSS를 TypeScript와 함께 구성하며, 설치, 테마 커스터마이징, 타입 안전 스타일링 패턴을 처리합니다. 기존 TypeScript 코드베이스에 Tailwind를 추가하거나 디자인 시스템 기반을 구축하는 데 이상적입니다. 설정에는 타입 안전 개발을 위한 컴포넌트 패턴, 유틸리티 확장, 플러그인 구성이 포함됩니다.

빠른 설치

Claude Code

문서

設 Tailwind CSS 與 TypeScript

於 TypeScript 項目配 Tailwind CSS，附自定主題、用、與類安之模。

用時

既 TypeScript 項目加 Tailwind CSS 乃用
為項目之設計系統自定 Tailwind 主題乃用
設類安件之風模乃用
配 Tailwind 之插件與擴乃用

入

必要：TypeScript 項目（Next.js、Vite、或獨之 React）
可選：設計系統之令（色、距、字）
可選：欲含之 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 裝後再試。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 下自定色與字、附正之 TypeScript 類（含 Config 之引）。

敗則：自定類不渲，驗 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）並自定基與件層之風。文件引於根布。

敗則：風未施，驗 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。cn.ts TypeScript 報類誤，驗 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: 前之類隨應。

敗則：暗模不切，驗 darkMode: "class" 設於 tailwind.config.ts。確 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 列。配變後重啟開發服。

驗

陷

content 徑缺：類不渲，察配中 content 列合文件之位
類衝：用 tailwind-merge（經 cn()）以防衝之用類
自定值不行：確自定值於 extend 下（為加），非主題之根（為代默）
暗模不切：察 darkMode 之設與 dark 類於 <html> 非 <body>

參

scaffold-nextjs-app — Tailwind 配前之項目設
deploy-to-vercel — 展風之應用

GitHub 저장소

pjt222/agent-almanac

경로: i18n/wenyan/skills/setup-tailwind-typescript

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

연관 스킬

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 또는 모바일 환경 전환 시 세션 상태와 컨텍스트를 관리하여 워크플로를 최적화합니다. 다양한 단계에서 서로 다른 도구가 필요한 복잡한 프로젝트에 사용하세요.

스킬 보기