Agent Skills
› NeverSight/learn-skills.dev
› modern-tailwind
modern-tailwind
GitHub提供Tailwind CSS最佳实践，涵盖核心原则、状态变体、响应式设计、主题定制及可维护性策略。指导开发者优先使用工具类，合理分组，利用语义化HTML与组件提取，确保UI代码清晰、可扩展且易于维护。
Trigger Scenarios
需要构建基于Tailwind CSS的用户界面
询问Tailwind CSS样式优化或最佳实践
涉及CSS类命名规范或响应式布局问题
讨论主题扩展或自定义工具类的使用
Install
npx skills add NeverSight/learn-skills.dev --skill modern-tailwind -g -y
SKILL.md
Frontmatter
{
"name": "modern-tailwind",
"description": "Build clean, scalable UIs with Tailwind CSS using modern utilities and variants"
}
Tailwind CSS Best Practices
Core Principles
- Prefer utility classes over custom CSS for most styling
- Keep class lists readable by grouping: layout → spacing → typography → color → effects
- Use semantic HTML first; utilities should enhance, not replace structure
Variants & State
- Use
hover,focus-visible,disabled,dark, andmotion-safevariants where appropriate - Prefer
data-*andaria-*variants for stateful styling tied to DOM semantics - Use
groupandpeerfor parent/sibling state without extra JS
Responsive & Container Queries
- Start with the base styles, then add responsive variants (
sm,md,lg, ...) - Use container query utilities when layout depends on parent size
Theming & Customization
- Extend the theme in
tailwind.configinstead of ad-hoc custom classes - Use
@layerfor custom utilities/components when repetition is unavoidable - Avoid
@applyexcept for small, repeatable patterns
Maintainability
- Extract reusable UI into components instead of repeating large class strings
- Keep class names deterministic; avoid dynamic string concatenation when possible
Version History
- e0220ca Current 2026-07-05 22:50
