What is tailwind-patterns?

A quick reference for common Tailwind utility patterns, responsive design, and config hints.

How do I enable dark mode?

Set darkMode: 'class' in tailwind.config.js and apply dark: variants in HTML.

Where can I find pattern examples?

In the SKILL.md examples for Card, Button, Form Input, Dark Mode, and ARbitrary Values; plus the Additional Resources section.

tailwind-patterns

Scanned

npx machina-cli add skill aiskillstore/marketplace/tailwind-patterns --openclaw

Files (1)

SKILL.md

2.2 KB

Tailwind Patterns

Quick reference for Tailwind CSS utility patterns.

Responsive Breakpoints

Prefix	Min Width
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full on mobile, half on tablet, third on desktop -->
</div>

Common Layout Patterns

<!-- Centered container -->
<div class="container mx-auto px-4">

<!-- Flexbox row -->
<div class="flex items-center justify-between gap-4">

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Stack -->
<div class="flex flex-col gap-4">

Card

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold mb-2">Title</h3>
  <p class="text-gray-600">Content</p>
</div>

Button

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
  Button
</button>

Form Input

<input type="text"
  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="Enter text">

Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

// tailwind.config.js
module.exports = { darkMode: 'class' }

State Modifiers

Modifier	Triggers On
`hover:`	Mouse hover
`focus:`	Element focused
`active:`	Being clicked
`disabled:`	Disabled state
`group-hover:`	Parent hovered

Spacing Scale

Class	Size
`p-1`	4px
`p-2`	8px
`p-4`	16px
`p-6`	24px
`p-8`	32px

Arbitrary Values

<div class="w-[137px] h-[calc(100vh-64px)]">

Additional Resources

For detailed patterns, load:

./references/component-patterns.md - Navbar, cards, forms, alerts, loading states

Source

git clone https://github.com/aiskillstore/marketplace/blob/main/skills/0xdarkmatter/tailwind-patterns/SKILL.mdView on GitHub

Overview

This skill offers a concise catalog of Tailwind utility patterns, from responsive breakpoints to common UI components. It highlights how to compose layouts with container, flex, grid, and spacing, and how to enable dark mode and state modifiers. It also points to patterns and resources for rapid prototyping.

How This Skill Works

Tailwind patterns are applied by composing utility classes directly in HTML. The guide provides practical HTML snippets for Card, Button, Form Input, and layout patterns, and demonstrates enabling dark mode via the Tailwind config and dark: variants.

When to Use It

When building responsive layouts across devices using sm:, md:, lg:, xl:, and 2xl: breakpoints.
When creating reusable UI blocks like cards, buttons, and form inputs using Tailwind utility classes.
When implementing grid or flex layouts with common patterns: container, flex row, grid columns, and vertical stacks.
When enabling dark mode via tailwind.config.js and applying dark: variants.
When prototyping UI quickly using arbitrary values and the spacing scale (p-1, p-2, etc.).

Quick Start

Step 1: Review the responsive breakpoints (sm, md, lg, xl, 2xl) and plan your layout.
Step 2: Implement components (Card, Button, Form Input) using the provided patterns and a consistent spacing scale.
Step 3: Enable dark mode in tailwind.config.js and test across themes and breakpoints.

Best Practices

Start with a stable layout foundation using container, flex, and grid before styling details.
Use responsive prefixes (sm:, md:, lg:, xl:, 2xl:) to tailor components to breakpoints.
Enable dark mode with darkMode: 'class' in tailwind.config.js and apply dark: variants consistently.
Create reusable templates for Card, Button, and Form Input to maintain consistency.
Use arbitrary values sparingly and test across devices for accessibility and performance.

Example Use Cases

Centered Card component with a title and content using Card pattern.
Responsive gallery grid with grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
Dark mode-enabled dashboard applying dark:bg and dark:text utilities.
Interactive Button with hover:bg and transition-colors for a polished UX.
Accessible Form Input featuring focus:ring-2 focus:ring-blue-500 and rounded borders.

Frequently Asked Questions

Add this skill to your agents