tailwind
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.
Tailwind CSS Skill teaches the utility-first approach to rapidly build custom, responsive UI without writing traditional CSS.
AI-generated summary based on this skill's SKILL.md
Install
bobmatnyc/claude-mpm-skills/tailwind · repository language: Python
git clone https://github.com/bobmatnyc/claude-mpm-skills
cp -r claude-mpm-skills/toolchains/ui/styling/tailwind ~/.claude/skills/tailwindnpx skillfed install bobmatnyc/claude-mpm-skills/tailwindFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tailwind CSS utility classes and how do I use them?
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.
How to use tailwind for responsive design with breakpoints?
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.
How do I set up dark mode in Tailwind CSS?
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—for example, `bg-white dark:bg-gray-900`. You can toggle the `dark` class on your root element to switch modes.
What is the tailwind configuration guide for customizing theme?
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.
How do I extract reusable component patterns using Tailwind?
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.
Can I integrate Tailwind with React, Vue, Svelte, or other frameworks?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Skill
progressive_disclosure: entry_point: - summary - when_to_use - quick_start sections: core_concepts: - utility_first_approach - responsive_design - configuration advanced: - dark_mode - custom_utilities - plugins - performance_optimization integration: - framework_integration - component_patterns reference: - common_utilities - breakpoints - color_system tokens: entry: 75 full: 4500
Summary
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
toolchains/ui/styling/tailwind/SKILL.md
toolchains/ui/styling/tailwind/metadata.json