{"enrichment":{"faq":[{"a":"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.","q":"What is tailwindcss-responsive-darkmode and what does it cover?"},{"a":"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.","q":"How do I set up dark mode with Tailwind CSS?"},{"a":"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.","q":"How can I avoid flash of unstyled content in dark mode?"},{"a":"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.","q":"What responsive design patterns does tailwindcss-responsive-darkmode teach?"},{"a":"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.","q":"How do I apply system preference detection and theme persistence?"},{"a":"Yes. tailwindcss-responsive-darkmode shows how to layer responsive breakpoints with dark mode variants\u2014for 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.","q":"Can I combine responsive utilities with dark mode in Tailwind?"}],"shadow_tags":["theme-switching","mobile-first-design","color-contrast","component-responsiveness","accessibility-patterns","device-agnostic","runtime-theming","breakpoint-strategy","semantic-colors","fouc-prevention"],"summary_rewrite":"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."},"files":[{"bytes":14851,"path":"plugins/tailwindcss-master/skills/tailwindcss-responsive-darkmode/SKILL.md","sha256":"14d16e3e5479f3b990b2b36f26f1292b729c05dd7837da4f64ca3aba853c24b0","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode/0c332fd3/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"tailwindcss-responsive-darkmode","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"patricio0312rev/skills/responsive-design-system"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"alinaqi/maggy/ui-web"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-coder"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"PracticalSwan/agent-skills/frontend-design"},{"id":"OneWave-AI/claude-skills/responsive-layout-builder"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"tailwindcss-responsive-darkmode"},"version":"0c332fd3"}