用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/johnalbertini14-glitch/openclaw-skills --skill tailwind-css命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | Tailwind CSS |
| description | Write Tailwind utility classes with proper responsive design, dark mode, and configuration. |
| metadata | {"clawdbot":{"emoji":"🌊","requires":{"bins":["npx"]},"os":["linux","darwin","win32"]}} |
content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production"./src/**/*.{js,jsx,ts,tsx,html}" covers nested directoriesbg-${color}-500 won't be detected—use complete class names or safelistmd: applies at medium AND abovesm:hidden md:block means hidden on small, visible on medium+—not "only on medium"extend.screens to add without replacingdark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle<html> or <body>, not on individual componentsdark:bg-gray-900 only applies when ancestor has class="dark"darkMode: 'media' uses prefers-color-schemehover:, focus:, active: work as expectedgroup-hover: requires group class on parent—child reacts to parent hoverpeer-focus: requires peer class on sibling AND sibling must come first in DOMdark:hover:bg-gray-700 applies on hover in dark modebg-[#1da1f2] for one-off colors—brackets for any arbitrary valuew-[calc(100%-2rem)] for calc expressionsgrid-cols-[1fr_2fr_1fr] underscores for spaces in values[mask-type:alpha] for unsupported CSS properties@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected@apply matters unlike HTML classes—later utilities override earlier@apply—easier to maintain, better tree-shaking@apply, keep it simple: base styles onlyextend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colorscolors: { brand: '#xxx' } removes all default colorstheme() function in CSS: border-color: theme('colors.gray.200')! prefix forces important: !mt-4 generates margin-top: 1rem !importantimportant: true in config makes ALL utilities important—avoid, breaks third-party CSSimportant: '#app' scopes specificity to selector—better than global importantclass="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decidesoverflow-hidden with rounded-* on parent with absolute childrenh-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)truncate needs width constraint or max-w-* to actually truncatesafelist with patterns like bg-*—defeats tree-shaking@layer components for reusable component styles—proper cascade order