setup-tailwind-typescript
Acerca de
Esta habilidad configura Tailwind CSS con TypeScript para proyectos de Next.js o React, manejando la instalación, personalización de temas y patrones de estilos con seguridad de tipos. Es ideal para agregar Tailwind a una base de código TypeScript existente o para establecer un sistema de diseño con extensiones personalizadas. Úsala para configurar utilidades de estilizado de componentes y plugins con soporte completo de TypeScript.
Instalación rápida
Claude Code
Recomendadonpx 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-typescriptCopia y pega este comando en Claude Code para instalar esta habilidad
Documentación
設 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。配變後重啟開發服。
驗
- Tailwind 類於瀏正繪
- 自題值（色、字、間）行
-
cn()合類無衝 - 暗模正切
- TypeScript 配與件無誤
- 產建除無用樣
忌
- content 徑缺：類不繪→察配
content陣合檔位 - 類衝：用
tailwind-merge（經cn()）防衝用類 - 自值不行：確自值於
extend（加）非題根（代默） - 暗模不切：察
darkMode設與dark類於<html>非<body>
參
scaffold-nextjs-appdeploy-to-vercel
Repositorio GitHub
Frequently asked questions
What is the setup-tailwind-typescript skill?
setup-tailwind-typescript is a Claude Skill by pjt222. Skills package instructions and resources that Claude loads on demand, so Claude can perform setup-tailwind-typescript-related tasks without extra prompting.
How do I install setup-tailwind-typescript?
Use the install commands on this page: add setup-tailwind-typescript to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does setup-tailwind-typescript belong to?
setup-tailwind-typescript is in the Design category, tagged react, ai and design.
Is setup-tailwind-typescript free to use?
Yes. setup-tailwind-typescript is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Habilidades relacionadas
Utilice la habilidad executing-plans cuando tenga un plan de implementación completo para ejecutar en lotes controlados con puntos de revisión. Esta habilidad carga y revisa críticamente el plan, luego ejecuta tareas en pequeños lotes (por defecto 3 tareas) mientras reporta el progreso entre cada lote para la revisión del arquitecto. Esto asegura una implementación sistemática con puntos de control de calidad integrados.
Esta habilidad despacha un subagente revisor de código para analizar los cambios en el código frente a los requisitos antes de proceder. Debe usarse después de completar tareas, implementar funciones principales o antes de fusionar con la rama principal. La revisión ayuda a detectar problemas de forma temprana al comparar la implementación actual con el plan original.
Esta habilidad proporciona una guía integral para que los desarrolladores conecten servidores MCP a Claude Code mediante transportes HTTP, stdio o SSE. Cubre la instalación, configuración, autenticación y seguridad para integrar servicios externos como GitHub, Notion y APIs personalizadas. Úsala al configurar integraciones MCP, al configurar herramientas externas o al trabajar con el Protocolo de Contexto del Modelo de Claude.
Esta habilidad ayuda a los desarrolladores a elegir entre las interfaces web y CLI de Claude Code mediante el análisis de tareas, y luego permite la teletransportación fluida de sesiones entre estos entornos. Optimiza el flujo de trabajo gestionando el estado y el contexto de la sesión al cambiar entre web, CLI o móvil. Úsala para proyectos complejos que requieren diferentes herramientas en varias etapas.