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
Decision gist · record as of 2026-07-18
Tailwind CSS Skill teaches the utility-first approach to rapidly build custom, responsive UI without writing traditional CSS. 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.
Use it when
- Tailwind uses a mobile-first breakpoint system.
- Tailwind supports dark mode through class or system preference detection.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
bobmatnyc/claude-mpm-skills/tailwind · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
toolchains/ui/styling/tailwind/SKILL.md
toolchains/ui/styling/tailwind/metadata.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn utility-first CSS approach and apply Tailwind to build custom UI”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Tailwind CSS with 29 rules spanning responsive layouts, dark mode setup, reusable component patterns, and configuration across v3.4+ and v4. Learn mobile-first design, conditional styling with utilities, and how to migrate projects from v3 to v4 using the new CSS-first approach.
Get framework-specific Tailwind CSS setup instructions covering React with Vite, Next.js App Router, Vue 3, Nuxt, SvelteKit, and Astro. Includes configuration files, dark mode setup, and reusable component patterns for each framework.
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.
Learn to build responsive, accessible interfaces using Tailwind CSS v4.1+ utility-first approach. Covers mobile-first design, dark mode, component patterns, and performance optimization for modern web applications.
Master Tailwind CSS, the utility-first framework that lets you build custom interfaces by composing single-purpose classes directly in your markup. This skill covers responsive design, dark mode, theme customization, component patterns, and production-ready optimization techniques.
This skill systematically processes Figma files to produce implementation-ready design specifications. It extracts design tokens, component hierarchies, and visual properties while classifying elements according to Atomic Design methodology, then generates comprehensive documentation for developers.
More skills tailwindcss-advanced-layouts (MIT) · responsive-design-system (MIT) · Tailwind Capacitor (unlicensed) · ui-web (MIT) · Tailwind Coder (NOASSERTION) · Tailwind Styling (NOASSERTION) · Ui Builder (unlicensed) · Shadcn Layouts (unlicensed)