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: jkoop-owing-tailwindcss-development3description: Tailwind CSS Development4---56# Tailwind CSS Development78## When to Apply910Activate this skill when:1112- Adding styles to components or pages13- Working with responsive design14- Implementing dark mode15- Extracting repeated patterns into components16- Debugging spacing or layout issues1718## Documentation1920Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.2122## Basic Usage2324- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.25- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).26- 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.2728## Tailwind CSS v3 Specifics2930- Always use Tailwind CSS v3 and verify you're using only classes it supports.31- Configuration is done in the `tailwind.config.js` file.32- Import using `@tailwind` directives:3334<code-snippet name="v3 Import Syntax" lang="css">35@tailwind base;36@tailwind components;37@tailwind utilities;38</code-snippet>3940## Spacing4142When listing items, use gap utilities for spacing; don't use margins.4344<code-snippet name="Gap Utilities" lang="html">45<div class="flex gap-8">46 <div>Item 1</div>47 <div>Item 2</div>48</div>49</code-snippet>5051## Dark Mode5253If existing pages and components support dark mode, new pages and components must support it the same way, typically using the `dark:` variant:5455<code-snippet name="Dark Mode" lang="html">56<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">57 Content adapts to color scheme58</div>59</code-snippet>6061## Common Patterns6263### Flexbox Layout6465<code-snippet name="Flexbox Layout" lang="html">66<div class="flex items-center justify-between gap-4">67 <div>Left content</div>68 <div>Right content</div>69</div>70</code-snippet>7172### Grid Layout7374<code-snippet name="Grid Layout" lang="html">75<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">76 <div>Card 1</div>77 <div>Card 2</div>78 <div>Card 3</div>79</div>80</code-snippet>8182## Verification83841. Check browser for visual rendering852. Test responsive breakpoints863. Verify dark mode if project uses it8788## Common Pitfalls8990- Using margins for spacing between siblings instead of gap utilities91- Forgetting to add dark mode variants when the project uses dark mode92- Not checking existing project conventions before adding new utilities93- Overusing inline styles when Tailwind classes would suffice9495---96> Converted and distributed by [TomeVault](https://tomevault.io/claim/jkoop) — claim your Tome and manage your conversions.97<!-- tomevault:4.0:skill_md:2026-04-16 -->
Run npx skillmds@latest add tomevault-io/jkoop-owing-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. 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