{
"format": "skillpro/v1",
"skill_id": "prowler-cloud-prowler-skills-tailwind-4-skill-md",
"name": "tailwind-4",
"version": "1.0.0",
"description": "Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className).",
"category": [
"生活与工具"
],
"trigger_words": [],
"tags": [
"ai"
],
"source": "DeepseekModel",
"source_url": "https://deepseekmodel.com/skill?id=prowler-cloud-prowler-skills-tailwind-4-skill-md",
"exported_at": "2026-09-16T06:53:03+08:00",
"system_prompt": "name tailwind-4 description Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className). license Apache-2.0 metadata {\"author\":\"prowler-cloud\",\"version\":\"1.0\",\"scope\":[\"root\",\"ui\"],\"auto_invoke\":\"Working with Tailwind classes\"} allowed-tools Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task Styling Decision Tree Tailwind class exists? → className=\"...\" Dynamic value? → style={{ width: `${x}%` }} Conditional styles? → cn(\"base\", condition && \"variant\") Static only? → className=\"...\" (no cn() needed) Library can't use class?→ style prop with var() constants Critical Rules Never Use var() in className // ❌ NEVER: var() in className < div className = \"text-[var(--text-color)]\" /> // ✅ ALWAYS: Use Tailwind semantic classes < div className = \"bg-primary\" /> < div className = \"text-slate-400\" /> Never Use Hex Colors // ❌ NEVER: Hex colors in className < div className = \"bg-[#1e293b]\" /> // ✅ ALWAYS: Use Tailwind color classes < p className = \"text-white\" /> < div className = \"bg-slate-800\" /> The cn() Utility import { clsx } from \"clsx\" ; import { twMerge } from \"tailwind-merge\" ; export function cn ( ... inputs : ClassValue [] ) { return twMerge ( clsx (inputs)); } When to Use cn() // ✅ Conditional classes // ✅ Merging with potential conflicts < button className = {cn( \" px-4 py-2 \", className )} /> // className might override // ✅ Multiple conditions < div className = {cn( \" rounded-lg border \", variant === \"primary\" && \" bg-blue-500 text-white \", variant === \"secondary\" && \" bg-gray-200 text-gray-800 \", disabled && \" opacity-50 cursor-not-allowed \" )} /> When NOT to Use cn() // ❌ Static classes - unnecessary wrapper // ✅ Just use className directly < div className = \"flex items-center gap-2\" /> Style Constants for Charts/Libraries When libraries don't accept className (like Recharts): // ✅ Constants with var() - ONLY for library props const CHART_COLORS = { primary : \"var(--color-primary)\" , secondary : \"var(--color-secondary)\" , text : \"var(--color-text)\" , gridLine : \"var(--color-border)\" , }; // Usage with Recharts (can't use className) < XAxis tick = {{ fill: CHART_COLORS.text }} /> < CartesianGrid stroke = {CHART_COLORS.gridLine} /> Dynamic Values // ✅ style prop for truly dynamic values < div style = {{ opacity: isVisible ? 1 : 0 }} /> // ✅ CSS custom properties for theming < div style = {{ \" --progress \" : `${ value }%` } as React.CSSProperties } /> Common Patterns Flexbox < div className = \"flex flex-col gap-2\" /> < div className = \"inline-flex items-center\" /> Grid < div className = \"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\" /> Spacing // Padding // All sides < div className = \"px-4 py-2\" /> // Horizontal, vertical < div className = \"pt-4 pb-2\" /> // Top, bottom // Margin < div className = \"m-4\" /> < div className = \"mx-auto\" /> // Center horizontally < div className = \"mt-8 mb-4\" /> Typography < p className = \"text-sm text-slate-400\" /> < span className = \"text-xs font-medium uppercase tracking-wide\" /> Borders & Shadows < div className = \"rounded-full shadow-lg\" /> < div className = \"ring-2 ring-blue-500 ring-offset-2\" /> States < input className = \"focus:border-blue-500 focus:outline-none\" /> < div className = \"group-hover:opacity-100\" /> Responsive < div className = \"hidden md:block\" /> < div className = \"text-sm md:text-base lg:text-lg\" /> Dark Mode < p className = \"text-gray-900 dark:text-white\" /> Arbitrary Values (Escape Hatch) // ✅ OK for one-off values not in design system < div className = \"top-[117px]\" /> < div className = \"grid-cols-[1fr_2fr_1fr]\" /> // ❌ Don't use for colors - use theme instead < div className = \"bg-[#1e293b]\" /> // NO",
"model_config": {
"provider": "deepseek",
"model": "deepseek-chat",
"temperature": 0.7,
"max_tokens": 4096,
"top_p": 0.9
},
"examples": [
{
"input": "请用tailwind-4帮我处理问题",
"output": "好的，我是tailwind-4。Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className). 我会根据你的需求提供专业帮助。"
},
{
"input": "介绍一下你的能力",
"output": "我是tailwind-4，专注于生活与工具领域。Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind (className, variants, cn()), especially when dynamic styling or CSS variables are involved (no var() in className)."
}
],
"install_guide": {
"coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
"dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
"claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
"custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
},
"scripts": {
"python": "# tailwind-4 - Python extension\n# Add custom Python logic here\ndef process(input_data):\n return input_data\n",
"javascript": "// tailwind-4 - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n return inputData;\n}\n"
},
"tools": {
"mcp_servers": [],
"api_endpoints": []
},
"dependencies": {
"python": [],
"node": []
},
"hooks": {
"on_load": "echo \"Skill loaded: tailwind-4\"",
"on_call": "",
"on_error": "echo \"Skill error: please check logs\""
}
}