Apply Tailwind CSS utilities for styling instead of custom CSS.
npx skills add https://github.com/ddoman90/claude-code-intro --skill modern-tailwind
Please help me install this Agent Skill. Skill: modern-tailwind Source: https://github.com/ddoman90/claude-code-intro/tree/main/.claude/skills/modern-tailwind Command: npx skills add https://github.com/ddoman90/claude-code-intro --skill modern-tailwind
Build clean, scalable UI styles by embracing Tailwind CSS utilities over heavy custom CSS.
hover, focus-visible, disabled, dark, and motion-safe variants where appropriatedata-* and aria-* variants for stateful styling tied to DOM semanticsgroup and peer for parent/sibling state without extra JSsm, md, lg, ...)tailwind.config instead of ad-hoc custom classes@layer for custom utilities/components when repetition is unavoidable@apply except for small, repeatable patternsStart by identifying a common component pattern and implement it with utility classes, then extract reusable tokens into Tailwind themes and layers.
High-intent search queries and answers about installing and using this skill.
To keep Tailwind CSS utility classes readable, group class lists by category: layout, spacing, typography, color, and effects. This deterministic ordering maintains styling clarity and prevents messy class strings across components.
Handle responsive design in Tailwind CSS by starting with base styles, then adding sm, md, and lg variants. Use hover, focus-visible, dark, and motion-safe variants, plus group and peer selectors for stateful styling without extra JavaScript.
When building a Tailwind design system, prefer utility classes over custom CSS and avoid @apply except for small, repeatable patterns. Use @layer for unavoidable repetition and extract reusable UI into components instead of large class strings.
Scale theming in Tailwind CSS by extending the theme configuration in tailwind.config instead of writing ad-hoc custom classes. This centralizes design tokens and ensures maintainable, consistent styling across web apps and component libraries.
Tailwind CSS supports DOM semantic styling using data-* and aria-* variants for stateful changes. For layout depending on parent size, use container query utilities alongside responsive variants to adapt designs without custom JavaScript logic.
Avoid dynamic string concatenation for Tailwind CSS class names because it breaks deterministic class detection. Keep class names static and complete to ensure the compiler correctly identifies and generates the required utility styles.
CodeAtCodeConfigure Tailwind v4 design tokens with CSS-first @theme variables.
EIS-ITSApply design tokens and CSS methodologies to style components and optimize production builds.
mlbrightStyle Rails ERB views and ViewComponents with Tailwind CSS 4 utility classes.
FlorianRiquelmeStandardize CSS across frameworks with consistent methodology and production optimization.