{"enrichment":{"faq":[{"a":"Tailwind CSS utility classes are low-level, single-purpose classes that let you build designs by composing them directly in your HTML. Instead of writing custom CSS, Tailwind provides classes like `flex`, `p-4`, `text-lg`, and `bg-blue-500` that you combine to style elements. This utility-first approach speeds up development and keeps your stylesheets lean by generating only the classes you actually use.","q":"What are tailwind CSS utility classes and how do I use them?"},{"a":"Tailwind uses a mobile-first breakpoint system. Prefix any utility with a breakpoint like `sm:`, `md:`, `lg:`, or `xl:` to apply styles only at that screen size and above. For example, `flex flex-col md:flex-row` stacks items vertically on mobile and horizontally on medium screens and up. You can customize breakpoints in your Tailwind configuration file to match your design system.","q":"How to use tailwind for responsive design with breakpoints?"},{"a":"Tailwind supports dark mode through class or system preference detection. Enable it in your `tailwind.config.js` by setting `darkMode: 'class'` (manual toggle) or `darkMode: 'media'` (respects OS setting). Then prefix utilities with `dark:` to apply styles in dark mode\u2014for example, `bg-white dark:bg-gray-900`. You can toggle the `dark` class on your root element to switch modes.","q":"How do I set up dark mode in Tailwind CSS?"},{"a":"Tailwind's configuration file (`tailwind.config.js`) lets you customize colors, spacing, breakpoints, fonts, and more under the `theme` section. Extend existing values with `theme.extend` or override them completely in `theme`. You can also add custom utilities, plugins, and variants. The configuration is JavaScript-based, giving you full programmatic control over your design system.","q":"What is the tailwind configuration guide for customizing theme?"},{"a":"Tailwind recommends extracting components at the template or component-framework level rather than creating CSS classes. Use your framework's component syntax (React, Vue, Svelte) to wrap utility combinations into reusable pieces. For repeated patterns, use `@apply` in CSS to group utilities into a class, or leverage component libraries built on Tailwind. This keeps your markup DRY while maintaining Tailwind's utility benefits.","q":"How do I extract reusable component patterns using Tailwind?"},{"a":"Tailwind integrates seamlessly with all modern frameworks. Install Tailwind via npm, configure your build process (PostCSS), and import the CSS in your app. In React/Next.js, Vue, Svelte, and others, apply Tailwind classes directly to component elements. Tailwind works with any framework's component model, making it ideal for building custom UI across different tech stacks.","q":"Can I integrate Tailwind with React, Vue, Svelte, or other frameworks?"}],"shadow_tags":["css-framework","utility-first","responsive-design","component-library","design-system","rapid-prototyping","styling-solution","configuration-driven","dark-mode-support","build-tool-integration"],"summary_rewrite":"This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks."},"files":[{"bytes":29390,"path":"toolchains/ui/styling/tailwind/SKILL.md","sha256":"64daceafd25c2591303ab9556665ef82bd68d16eb08ccd672ae45affa07ab12b","url":"https://skillfed.io/files/bobmatnyc/claude-mpm-skills/tailwind/29532c5e/SKILL.md"}],"id":"bobmatnyc/claude-mpm-skills/tailwind","links":{"html":"https://skillfed.io/bobmatnyc/claude-mpm-skills/tailwind","md":"https://skillfed.io/bobmatnyc/claude-mpm-skills/tailwind.md","repo":"https://github.com/bobmatnyc/claude-mpm-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":18,"language":"Python","last_updated":"2026-07-18","license":"MIT","name":"tailwind","publisher":"bobmatnyc","stars":62},"relations":{"similar":[{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"patricio0312rev/skills/responsive-design-system"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-styling"},{"id":"Cap-go/capgo-skills/tailwind-capacitor"},{"id":"giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode"}]},"slug":{"owner":"bobmatnyc","repo":"claude-mpm-skills","skill":"tailwind"},"version":"29532c5e"}