Use search-docs for detailed Tailwind CSS v3 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 v3 Specifics
Always use Tailwind CSS v3 and verify you're using only classes it supports.
Configuration is done in the tailwind.config.js file.
Import using @tailwind directives:
Spacing
When listing items, use gap utilities for spacing; don't use margins.
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
Grid Layout
Verification
Check browser for visual rendering
Test responsive breakpoints
Verify dark mode if project uses it
Common Pitfalls
Using margins for spacing between siblings instead of gap utilities
Forgetting to add dark mode variants when the project uses dark mode
Not checking existing project conventions before adding new utilities
Overusing inline styles when Tailwind classes would suffice
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: andy3471-sparekey-club-tailwindcss-development3description: Tailwind CSS Development4---56# Tailwind CSS Development78## When to Apply910Activate this skill when:11- Adding styles to components or pages12- Working with responsive design13- Implementing dark mode14- Extracting repeated patterns into components15- Debugging spacing or layout issues1617## Documentation1819Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.2021## Basic Usage2223- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.24- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).25- 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.2627## Tailwind CSS v3 Specifics2829- Always use Tailwind CSS v3 and verify you're using only classes it supports.30- Configuration is done in the `tailwind.config.js` file.31- Import using `@tailwind` directives:3233<code-snippet name="v3 Import Syntax" lang="css">34@tailwind base;35@tailwind components;36@tailwind utilities;37</code-snippet>3839## Spacing4041When listing items, use gap utilities for spacing; don't use margins.4243<code-snippet name="Gap Utilities" lang="html">44<div class="flex gap-8">45 <div>Item 1</div>46 <div>Item 2</div>47</div>48</code-snippet>4950## Dark Mode5152If existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:5354<code-snippet name="Dark Mode" lang="html">55<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">56 Content adapts to color scheme57</div>58</code-snippet>5960## Common Patterns6162### Flexbox Layout6364<code-snippet name="Flexbox Layout" lang="html">65<div class="flex items-center justify-between gap-4">66 <div>Left content</div>67 <div>Right content</div>68</div>69</code-snippet>7071### Grid Layout7273<code-snippet name="Grid Layout" lang="html">74<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">75 <div>Card 1</div>76 <div>Card 2</div>77 <div>Card 3</div>78</div>79</code-snippet>8081## Verification82831. Check browser for visual rendering842. Test responsive breakpoints853. Verify dark mode if project uses it8687## Common Pitfalls8889- Using margins for spacing between siblings instead of gap utilities90- Forgetting to add dark mode variants when the project uses dark mode91- Not checking existing project conventions before adding new utilities92- Overusing inline styles when Tailwind classes would suffice9394---95> Converted and distributed by [TomeVault](https://tomevault.io/claim/andy3471) — claim your Tome and manage your conversions.96<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/andy3471-sparekey-club-tailwindcss-development in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Tailwind CSS Development It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io