Installs into .claude/skills of the current project.
Are you the author of Tailwind?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/skeletorflet-tailwind)
---
name: tailwind
description: Tailwind CSS — utility-first CSS framework with responsive prefixes, dark mode, JIT engine, and customization via config.
---
### core philosophy
Utility-first. Compose designs using single-purpose classes. No context switching between HTML and CSS files.
### responsive & state
Prefix breakpoints: `sm:` `md:` `lg:` `xl:` `2xl:`. State variants: `hover:` `focus:` `active:` `disabled:`. Group variants: `group-hover:` `peer-invalid:`. Dark mode: `dark:` prefix or `class` strategy in config.
### custom theme
Edit `tailwind.config.{js,ts}`: extend colors, spacing, fonts, breakpoints. Use `theme()` function in CSS. Arbitrary values: `w-[123px]` `bg-[#1da1f1]` `grid-cols-[1fr_2fr]`.
### @apply & components
Extract repeated utility groups with `@apply` in CSS. Use `@layer components` for component classes. Avoid `@apply` for truly atomic patterns.
### plugins
`require('@tailwindcss/forms')`, `@tailwindcss/typography` (prose), `@tailwindcss/aspect-ratio`, `@tailwindcss/container-queries`. Write custom plugins with `addUtilities`, `addComponents`, `matchUtilities`.
### v4 changes
CSS-first config (no `tailwind.config` needed). `@import "tailwindcss"` in CSS entry. `@theme` directive for design tokens. Built-in container queries. Simplified dark mode. New `@variant` system.
### JIT engine
On-demand generation. Zero unused CSS in production. Every combination is valid without config. Rebuilds in milliseconds.
### best practices
Mobile-first responsive design. Use design tokens (spacing scale, color palette). Purge unused classes in production. Prefer `gap` over margin for layouts.
