setup-tailwind-typescript

pjt222

Mis à jour 6 days ago

14 vues

Designreactaidesign

À propos

Cette compétence configure Tailwind CSS avec TypeScript pour les projets Next.js ou React, en gérant l'installation, la personnalisation du thème et les modèles de style type-safe. Elle est idéale pour ajouter Tailwind à une base de code TypeScript existante ou pour établir un système de design avec des extensions personnalisées. Utilisez-la pour configurer des utilitaires de style de composants et des plugins avec un support complet de TypeScript.

Installation rapide

Claude Code

Recommandé

Principal

npx skills add pjt222/agent-almanac -a claude-code

Commande PluginAlternatif

/plugin add https://github.com/pjt222/agent-almanac

Git CloneAlternatif

git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/setup-tailwind-typescript

Copiez et collez cette commande dans Claude Code pour installer cette compétence

Documentation

設 Tailwind 含 TypeScript

於 TypeScript 項配 Tailwind CSS 含自題、用、型安式。

用

加 Tailwind 至既 TypeScript 項→用
自項設系之 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 再試。單庫多項→於應根行非工區根。

二：配 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（或 _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",
  // ... 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
deploy-to-vercel

Dépôt GitHub

pjt222/agent-almanac

Chemin: i18n/wenyan-ultra/skills/setup-tailwind-typescript

agentsagentskillsai-assisted-developmentclaude-codeskillsteams

Compétences associées

executing-plans

Design

Utilisez la compétence executing-plans lorsque vous disposez d'un plan de mise en œuvre complet à exécuter par lots contrôlés avec des points de contrôle de revue. Elle charge et examine le plan de manière critique, puis exécute les tâches par petits lots (3 tâches par défaut) tout en rapportant la progression entre chaque lot pour une revue par l'architecte. Cela garantit une mise en œuvre systématique avec des points de contrôle de qualité intégrés.

Voir la compétence

requesting-code-review

Design

Cette compétence délègue un sous-agent réviseur de code pour analyser les modifications apportées au code par rapport aux exigences avant de poursuivre. Elle doit être utilisée après avoir terminé des tâches, implémenté des fonctionnalités majeures, ou avant une fusion vers la branche principale. La revue aide à détecter précocement les problèmes en comparant l'implémentation actuelle avec le plan initial.

Voir la compétence

connect-mcp-server

Design

Cette compétence fournit un guide complet permettant aux développeurs de connecter des serveurs MCP à Claude Code via les transports HTTP, stdio ou SSE. Elle couvre l'installation, la configuration, l'authentification et la sécurité pour intégrer des services externes tels que GitHub, Notion et des API personnalisées. Utilisez-la lors de la configuration d'intégrations MCP, de la configuration d'outils externes ou du travail avec le Protocole de Contexte de Modèle de Claude.

Voir la compétence

web-cli-teleport

Design

Cette compétence aide les développeurs à choisir entre les interfaces Web et CLI de Claude Code en fonction de l'analyse des tâches, puis permet une téléportation transparente des sessions entre ces environnements. Elle optimise le flux de travail en gérant l'état et le contexte de la session lors du passage entre le web, la CLI ou le mobile. Utilisez-la pour des projets complexes nécessitant différents outils à diverses étapes.

Voir la compétence