tailwindcss-responsive-darkmode
Learn to build dark mode interfaces using Tailwind's class-based and media-query strategies, plus responsive design patterns across mobile, tablet, and desktop. Covers system preference detection, runtime toggling, FOUC prevention, and container queries for component-level responsiveness.
Tailwind CSS Responsive Dark Mode teaches you to implement dark mode toggles and responsive layouts using Tailwind's built-in utilities and breakpoint system.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-responsive-darkmode ~/.claude/skills/tailwindcss-responsive-darkmodenpx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmodeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is tailwindcss-responsive-darkmode and what does it cover?
tailwindcss-responsive-darkmode teaches you to build dark mode interfaces using Tailwind's class-based and media-query strategies, plus responsive design patterns across mobile, tablet, and desktop. It covers system preference detection, runtime toggling, FOUC prevention, and container queries for component-level responsiveness.
How do I set up dark mode with Tailwind CSS?
tailwindcss-responsive-darkmode shows how to implement dark mode using both class-based toggles (applying a dark class to a parent element) and media-query approaches (detecting prefers-color-scheme). You can combine these strategies to let users override system preferences while respecting their OS settings by default.
How can I avoid flash of unstyled content in dark mode?
tailwindcss-responsive-darkmode addresses FOUC prevention by loading theme preferences before rendering, using script tags in the document head or theme persistence libraries. This ensures the correct color scheme applies immediately without a visible flicker when the page loads.
What responsive design patterns does tailwindcss-responsive-darkmode teach?
tailwindcss-responsive-darkmode covers mobile-first breakpoints, container queries for component-level responsiveness, and combining responsive utilities with dark mode styling. You'll learn to build layouts that adapt across mobile, tablet, and desktop while maintaining consistent dark and light themes.
How do I apply system preference detection and theme persistence?
tailwindcss-responsive-darkmode explains how to detect the user's system light/dark preference using prefers-color-scheme, then persist their manual theme choice in localStorage or similar storage. This lets you respect OS settings initially while allowing runtime toggling and remembering user selections.
Can I combine responsive utilities with dark mode in Tailwind?
Yes. tailwindcss-responsive-darkmode shows how to layer responsive breakpoints with dark mode variants—for example, sm:dark:bg-slate-900 applies a dark background only on small screens in dark mode. This lets you fine-tune colors and spacing for each theme and breakpoint combination.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Responsive Design & Dark Mode (2025/2026)
Responsive Design
Mobile-First Approach (Industry Standard 2025/2026)
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.
```html <!-- CORRECT: Mobile-first (progressive
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
plugins/tailwindcss-master/skills/tailwindcss-responsive-darkmode/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-responsive-darkmode/references/advanced-responsive-patterns.md