Skill

styling-with-tailwind

Provides Tailwind CSS 3.x utility classes reference for spacing, colors, typography, flexbox, grid, responsive designs, state variants, dark mode, and tailwind.config.js configuration.

Tailwind

npx claudepluginhub fortiumpartners/ensemble --plugin ensemble-development

Popularity

Parent stars

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/ensemble-development:styling-with-tailwind

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

**Target**: Tailwind CSS 3.4+ | **Purpose**: Utility-first CSS styling reference

Supporting Files

README.mdREFERENCE.md

SKILL.md

379 lines · ~2k tokens

Similar Skills

tailwind-css-patterns

247

Provides Tailwind CSS utility patterns for responsive layouts, flexbox, grid, typography, colors, and components. Use for styling React/Vue/Svelte apps, design systems, and CSS optimization.

8 files6 tools

developer-kit-typescript

tailwind-utility-classes

152

References Tailwind CSS utility classes for layout, spacing, typography, colors, backgrounds, borders, shadows, effects, and responsive design. Aids utility-first CSS composition.

6 tools

tailwind

Provides Tailwind CSS v4 quick references for utility classes, layouts, spacing, typography, colors, responsive design, animations, Shadcn/ui components, dark mode, and config editing.

1 file

flow

Stats

LanguageJavaScript

Parent stars10

Parent forks4

MaintenanceExcellent

Last CommitMar 30, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

Tailwind CSS 3.x Skill

Target: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference

Overview
Quick Start
Core Utility Classes
Flexbox
Grid
Responsive Design
State Variants
Dark Mode
Basic Configuration
Essential Component Patterns
@apply Directive
Arbitrary Values
Performance Tips
Quick Reference Card

Overview

What is Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in markup.

When to Use This Skill:

Styling components with utility classes
Configuring tailwind.config.js
Implementing responsive designs
Creating dark mode themes

Prerequisites: Node.js 14.0+ (for build tools)

Quick Start

Installation

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Minimal Configuration

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./index.html"],
  theme: { extend: {} },
  plugins: [],
}

CSS Entry Point:

@tailwind base;
@tailwind components;
@tailwind utilities;

Core Utility Classes

Spacing (Margin & Padding)

Pattern	Example	Result
`m-{size}`	`m-4`	margin: 1rem
`p-{size}`	`p-8`	padding: 2rem
`mx-auto`	`mx-auto`	center horizontally
`space-x-{size}`	`space-x-4`	horizontal gap between children

Scale: 0=0px, 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, 16=4rem

Colors

Format: {property}-{color}-{shade}

<div class="bg-blue-500 text-white border-gray-300">

Properties: text-, bg-, border-, ring-, divide- Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Typography

Class	Effect
`text-sm/base/lg/xl/2xl`	Font size
`font-normal/medium/semibold/bold`	Font weight
`text-left/center/right`	Text alignment
`truncate`	Ellipsis overflow
`line-clamp-{1-6}`	Multi-line truncation

Sizing

Pattern	Example
`w-full`, `w-1/2`, `w-64`	Width
`h-screen`, `h-48`	Height
`max-w-sm/md/lg/xl`	Max width
`size-10`	Width + height together

Flexbox

Quick Pattern

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

Class	Effect
`flex` / `flex-col`	Enable flexbox, set direction
`items-center`	Vertical alignment
`justify-between`	Horizontal distribution
`gap-4`	Gap between items
`flex-1`	Grow to fill space
`shrink-0`	Prevent shrinking

Grid

Quick Pattern

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Wide</div>
  <div>Normal</div>
</div>

Class	Effect
`grid-cols-{1-12}`	Column count
`col-span-{1-12}`	Span columns
`gap-{size}`	Gap between cells

Auto-fit Pattern (Responsive without Breakpoints)

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">

Responsive Design

Breakpoint Prefixes (Mobile-First)

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

Common Patterns

<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">

<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only</div>

<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">

State Variants

Hover, Focus, Active

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">

Prefix	Trigger
`hover:`	Mouse over
`focus:`	Element focused
`active:`	Being clicked
`disabled:`	Disabled element

Group and Peer

<!-- Group: parent state affects children -->
<div class="group hover:bg-gray-100">
  <span class="group-hover:text-blue-500">Hover parent</span>
</div>

<!-- Peer: sibling state affects element -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>

Dark Mode

Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' for OS preference
}

Usage

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

Basic Configuration

Extending Theme

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#3b82f6', 900: '#1e3a8a' },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

See REFERENCE.md for advanced configuration (custom screens, container, presets, plugins).

Essential Component Patterns

Button

<button class="
  px-4 py-2
  bg-blue-500 hover:bg-blue-600
  text-white font-medium rounded-lg
  focus:outline-none focus:ring-2 focus:ring-blue-300
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors
">
  Button
</button>

Card

<div class="
  bg-white dark:bg-gray-800
  rounded-xl shadow-lg p-6
  border border-gray-200 dark:border-gray-700
">
  <h3 class="text-xl font-semibold">Title</h3>
  <p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>

See REFERENCE.md for more component patterns (input, navigation, badge, modal).

@apply Directive

Extract repeated utilities into custom classes:

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }
  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }
}

When to Use: Repeated utility combinations, component libraries When to Avoid: One-off styles (use inline utilities)

Arbitrary Values

Use brackets for one-off custom values:

<div class="w-[137px]">Exact width</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="grid-cols-[1fr_500px_2fr]">Custom columns</div>

Performance Tips

Content Configuration: Ensure all template paths are in content array
Avoid Dynamic Classes: bg-${color}-500 won't work

// DON'T
className={`bg-${color}-500`}

// DO
const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' };
className={colorClasses[color]}

Quick Reference Card

SPACING: m-4 p-4 mx-auto space-x-4 gap-4
SIZING: w-full h-screen max-w-xl size-10
FLEX: flex flex-col items-center justify-between flex-1
GRID: grid grid-cols-3 col-span-2 gap-4
TEXT: text-lg font-bold text-center truncate
COLORS: bg-blue-500 text-white border-gray-300
BORDERS: border rounded-lg border-2
SHADOWS: shadow-sm shadow-lg
POSITION: absolute relative fixed sticky top-0 z-50
RESPONSIVE: sm: md: lg: xl: 2xl:
STATES: hover: focus: active: disabled: dark:
TRANSITIONS: transition duration-200

See Also: REFERENCE.md for:

Complete utility class reference (layout, typography, effects, filters)
Advanced configuration (presets, content transform, safelist)
Custom plugin development
Animation utilities and custom keyframes
Typography plugin usage
CSS-in-JS integration (twin.macro, CVA, clsx)
Framework integration (Next.js, Vite, Nuxt, SvelteKit)
Performance optimization
Migration guides

See Also: REFERENCE.md for comprehensive documentation.

styling-with-tailwind

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

Similar Skills

Help us improve

Help us improve

Find plugins for your project

styling-with-tailwind

Popularity

Invocation

Context Preview

Supporting Files

SKILL.md

Tailwind CSS 3.x Skill

Table of Contents

Overview

Quick Start

Installation

Minimal Configuration

Core Utility Classes

Spacing (Margin & Padding)

Colors

Typography

Sizing

Flexbox

Quick Pattern

Grid

Quick Pattern

Auto-fit Pattern (Responsive without Breakpoints)

Responsive Design

Breakpoint Prefixes (Mobile-First)

Common Patterns

State Variants

Hover, Focus, Active

Group and Peer

Dark Mode

Configuration

Usage

Basic Configuration

Extending Theme

Essential Component Patterns

Button

Card

@apply Directive

Arbitrary Values

Performance Tips

Quick Reference Card

Similar Skills

Help us improve

Tailwind CSS 3.x Skill

Table of Contents

Overview

Quick Start

Installation

Minimal Configuration

Core Utility Classes

Spacing (Margin & Padding)

Colors

Typography

Sizing

Flexbox

Quick Pattern

Grid

Quick Pattern

Auto-fit Pattern (Responsive without Breakpoints)

Responsive Design

Breakpoint Prefixes (Mobile-First)

Common Patterns

State Variants

Hover, Focus, Active

Group and Peer

Dark Mode

Configuration

Usage

Basic Configuration

Extending Theme

Essential Component Patterns