Apply Tailwind CSS v4 styling, including responsive design, themes, and layout utilities.
Install
mkdir -p .claude/skills/tailwindcss-development && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3567" && unzip -o skill.zip -d .claude/skills/tailwindcss-development && rm skill.zipInstalls to .claude/skills/tailwindcss-development
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.Key capabilities
- →Apply Tailwind utility classes
- →Implement CSS-first themes
- →Extract repeated patterns
- →Configure dark mode utilities
How it works
It applies Tailwind v4 utilities using the `@theme` directive, favoring CSS-first configuration over traditional JS config files.
Inputs & outputs
When to use tailwindcss-development
- →Style components with Tailwind classes
- →Implement dark mode in UI
- →Refactor repeated CSS into components
- →Debug grid and flexbox layouts
About this skill
Tailwind CSS Development
When to Apply
Activate this skill when:
- Adding styles to components or pages
- Working with responsive design
- Implementing dark mode
- Extracting repeated patterns into components
- Debugging spacing or layout issues
Documentation
Use search-docs for detailed Tailwind CSS v4 patterns and documentation.
Basic Usage
- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
Tailwind CSS v4 Specifics
- Always use Tailwind CSS v4 and avoid deprecated utilities.
corePluginsis not supported in Tailwind v4.
CSS-First Configuration
In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed:
Import Syntax
In Tailwind v4, import Tailwind with a regular CSS @import statement instead of the @tailwind directives used in v3:
Replaced Utilities
Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
| Deprecated | Replacement |
|---|---|
| bg-opacity-* | bg-black/* |
| text-opacity-* | text-black/* |
| border-opacity-* | border-black/* |
| divide-opacity-* | divide-black/* |
| ring-opacity-* | ring-black/* |
| placeholder-opacity-* | placeholder-black/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
Spacing
Use gap utilities instead of margins for spacing between siblings:
Dark Mode
If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:
Common Patterns
Flexbox Layout
<code-snippet name="Flexbox Layout" lang="html"> <div class="flex items-center justify-between gap-4"> <div>Left content</div> <div>Right content</div> </div> </code-snippet>Grid Layout
<code-snippet name="Grid Layout" lang="html"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div>Card 1</div> <div>Card 2</div> <div>Card 3</div> </div> </code-snippet>Common Pitfalls
- Using deprecated v3 utilities (bg-opacity-, flex-shrink-, etc.)
- Using
@tailwinddirectives instead of@import "tailwindcss" - Trying to use
tailwind.config.jsinstead of CSS@themedirective - Using margins for spacing between siblings instead of gap utilities
- Forgetting to add dark mode variants when the project uses dark mode
When not to use it
- →Projects requiring deep CSS-in-JS
- →Constraint-heavy legacy stylesheets
Prerequisites
Limitations
- →Requires Tailwind v4 ecosystem
- →Cannot use legacy corePlugins architecture
How it compares
It explicitly uses the modern v4 CSS-first import syntax rather than outdated `@tailwind` directives.
Compared to similar skills
tailwindcss-development side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tailwindcss-development (this skill) | 4 | 6mo | No flags | Beginner |
| ui-styling | 12 | 9mo | Review | Beginner |
| web-design-reviewer | 7 | 7mo | No flags | Intermediate |
| design-lab | 7 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by spatie
View all by spatie →You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
design-lab
0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
frontend-design-pro
claudekit
Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations. Zero AI slop, zero fake URLs.
frontend-enhancer
ailabs-393
This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.
bencium-innovative-ux-designer
bencium
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.