tailwind-css-patterns
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.
Tailwind CSS Patterns provides utility-first styling guidance for building responsive React, Vue, and Svelte components.
AI-generated summary based on this skill's SKILL.md
Install
giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns · repository language: Python
git clone https://github.com/giuseppe-trisciuoglio/developer-kit
cp -r developer-kit/plugins/developer-kit-typescript/skills/tailwind-css-patterns ~/.claude/skills/tailwind-css-patternsnpx skillfed install giuseppe-trisciuoglio/developer-kit/tailwind-css-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tailwind css responsive design patterns?
Tailwind CSS patterns uses a mobile-first approach with breakpoint prefixes (sm, md, lg, xl, 2xl) to create responsive designs. Apply utilities like `md:flex` or `lg:grid-cols-3` to adjust layouts at different screen sizes. Combine breakpoints with Tailwind's grid and flexbox utilities to build fluid, adaptable interfaces that work seamlessly across devices.
How do I style React/Vue/Svelte components with Tailwind?
Tailwind CSS patterns makes component styling straightforward by applying utility classes directly to elements. For React, add classes to JSX elements; for Vue, use class bindings; for Svelte, apply classes to markup. Combine utilities like `bg-blue-500 text-white px-4 py-2 rounded` to build styled components without writing custom CSS.
How can I implement dark mode in Tailwind CSS projects?
Tailwind CSS patterns supports dark mode through the `dark:` prefix. Enable dark mode in your config, then use classes like `dark:bg-gray-900 dark:text-white` to define dark variants. Toggle dark mode via class-based switching or system preference detection to provide users with seamless theme switching.
What's the best way to build a responsive grid layout?
Tailwind CSS patterns provides grid utilities like `grid`, `grid-cols-1`, `md:grid-cols-2`, `lg:grid-cols-3` for responsive layouts. Start with single-column mobile design, then add breakpoint prefixes to increase columns on larger screens. Use `gap-4` for spacing and `auto-rows-min` for flexible row heights.
How do I implement design systems and reusable components?
Tailwind CSS patterns supports design systems through component composition and configuration. Extract common utility combinations into reusable classes using `@apply`, create component libraries with consistent spacing and color tokens, and define custom theme values in `tailwind.config.js` for brand consistency across your project.
What should I do if tailwind css classes aren't applying?
Tailwind CSS patterns requires proper configuration and content scanning. Ensure your `tailwind.config.js` includes all template paths in the `content` array. Verify the build process is running, check for typos in class names, and confirm Tailwind's CSS file is imported. Use `@tailwind` directives in your main CSS file to include all layers.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS Development Patterns
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Overview
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
When to Use
- Styling React/Vue/Svelte components
- Building responsive layouts and grids
- Implementing design systems
- Adding dark mode support
- Optimizing CSS workflow
Quick Reference
Responsive Breakpoints
| Prefix | Min Width | Description |
|---|---|---|
sm: |
640px | Small screens |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 9 files
plugins/developer-kit-typescript/skills/tailwind-css-patterns/SKILL.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/accessibility.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/animations.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/component-patterns.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/configuration.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/layout-patterns.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/performance.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/reference.md
plugins/developer-kit-typescript/skills/tailwind-css-patterns/references/responsive-design.md