Tailwind uses a mobile-first breakpoint system. With over 60% of global web traffic from mobile devices and Google's mobile-first indexing, this approach is essential.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versiontailwindcss-responsive-darkmodeExecute the skills CLI command in your project's root directory to begin installation:
Fetches tailwindcss-responsive-darkmode from josiahsiegel/claude-plugin-marketplace and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate tailwindcss-responsive-darkmode. Access via /tailwindcss-responsive-darkmode in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
0
total installs
0
this week
23
GitHub stars
0
upvotes
Run in your terminal
0
installs
0
this week
23
stars
Tailwind uses a mobile-first breakpoint system. With over 60% of global web traffic from mobile devices and Google's mobile-first indexing, this approach is essential.
Key Principle: Unprefixed utilities apply to ALL screen sizes. Breakpoint prefixes apply at that size AND ABOVE.
<!-- CORRECT: Mobile-first (progressive enhancement) -->
<div class="text-sm md:text-base lg:text-lg">...</div>
<!-- INCORRECT: Desktop-first thinking -->
<div class="lg:text-lg md:text-base text-sm">...</div>
| Prefix | Min Width | Typical Devices | CSS Media Query |
|---|---|---|---|
| (none) | 0px | All mobile phones | All sizes |
sm: |
640px (40rem) | Large phones, small tablets | @media (min-width: 640px) |
md: |
768px (48rem) | Tablets (portrait) | @media (min-width: 768px) |
lg: |
1024px (64rem) | Tablets (landscape), laptops | @media (min-width: 1024px) |
xl: |
1280px (80rem) | Desktops | @media (min-width: 1280px) |
2xl: |
1536px (96rem) | Large desktops | @media (min-width: 1536px) |
Common device sizes to test:
@theme {
/* Add custom breakpoints for specific content needs */
--breakpoint-xs: 20rem; /* 320px - very small devices */
--breakpoint-3xl: 100rem; /* 1600px */
--breakpoint-4xl: 120rem; /* 1920px - full HD */
/* Override existing breakpoints based on YOUR content */
--breakpoint-sm: 36rem; /* 576px - when content needs space */
--breakpoint-lg: 62rem; /* 992px - common content width */
}
Usage:
<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
<!-- Custom breakpoints work like built-in ones -->
</div>
Instead of targeting devices, let your content determine breakpoints:
@theme {
/* Based on content needs, not device specs */
--breakpoint-prose: 65ch; /* Optimal reading width */
--breakpoint-content: 75rem; /* Main content max */
}
Test your design at various widths and add breakpoints where layout breaks.
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
Responsive Heading
</h1>
<p class="text-sm md:text-base lg:text-lg leading-relaxed">
Responsive paragraph text
</p>
<section class="py-8 md:py-12 lg:py-16 px-4 md:px-8 lg:px-12">
<div class="max-w-4xl mx-auto">
Content with responsive padding
</div>
</section>
<nav class="flex flex-col md:flex-row items-center justify-between">
<div class="hidden md:flex gap-4">
<!-- Desktop navigation -->
</div>
<button class="md:hidden">
<!-- Mobile menu button -->
</button>
</nav>
<!-- Hidden on mobile, visible on desktop -->
<div class="hidden md:block">Desktop only</div>
<!-- Visible on mobile, hidden on desktop -->
<div class="block md:hidden">Mobile only</div>
<!-- Different content per breakpoint -->
<span class="sm:hidden">XS</span>
<span class="hidden sm:inline md:hidden">SM</span>
<span class="hidden md:inline lg:hidden">MD</span>
<span class="hidden lg:inline xl:hidden">LG</span>
<span class="hidden xl:inline 2xl:hidden">XL</span>
<span class="hidden 2xl:inline">2XL</span>
Container queries enable component-level responsiveness, independent of viewport size. This is essential for reusable components in 2025.
@plugin "@tailwindcss/container-queries";
<!-- Mark parent as a query container -->
<div class="@container">
<div class="flex flex-col @md:flex-row @lg:gap-8">
<!-- Responds to container size, not viewport -->
</div>
</div>
<!-- Named containers for multiple contexts -->
<div class="@container/card">
<div class="@lg/card:grid-cols-2 grid grid-cols-1">
<!-- Responds specifically to 'card' container -->
</div>
</div>
| Class | Min-width | Use Case |
|---|---|---|
@xs |
20rem (320px) | Small widgets |
@sm |
24rem (384px) | Compact cards |
@md |
28rem (448px) | Standard cards |
@lg |
32rem (512px) | Wide cards |
Implementation GuidePrerequisites
Time Estimate 15-45 minutes depending on use case complexity Steps
Common Pitfalls
Best Practices✓ Do
✗ Don't
💡 Pro Tips
When to Use This✓ Use when Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement. ✗ Avoid when Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion. Learning Path
Related Skillsfrontend-design633anthropics/claude-code Frontendsame category ui-animation230mblode/agent-skills Frontendsame category premium-frontend-ui228github/awesome-copilot Frontendsame category high-end-visual-design183leonxlnx/taste-skill Frontendsame category antigravity-design-expert182sickn33/antigravity-awesome-skills Frontendsame category interior-design-expert133erichowens/some_claude_skills Frontendsame category Reviews4.6★★★★★68 reviews
showing 1-10 of 68 1 / 7 DiscussionComments — not star reviews
|