styling-with-tailwind

Name: styling-with-tailwind
Rating: 65
Author: FortiumPartners

by FortiumPartners

Ensemble Plugin Ecosystem - Modular Claude Code plugins for AI-augmented development workflows

⭐ 0🍴 1📅 Jan 22, 2026

ai-development claude claude-code cli development-tools nodejs plugins typescript

View on GitHub Run in Manus

SKILL.md

name: styling-with-tailwind description: Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes.

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.

Score

Total Score

65/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20

✓LICENSE

ライセンスが設定されている

+10

○説明文

100文字以上の説明がある

0/10

○人気

GitHub Stars 100以上

0/15

✓最近の活動

1ヶ月以内に更新

+10

○フォーク

10回以上フォークされている

0/5

✓Issue管理

オープンIssueが50未満

✓言語

プログラミング言語が設定されている

✓タグ

1つ以上のタグが設定されている

Reviews

💬

Reviews coming soon

styling-with-tailwind

SKILL.md

name: styling-with-tailwind description: Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes.

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

Score

Reviews

Related

Related Skills

create-pr

prompt-lookup

skill-lookup

writing-dev-server-tests

writing-bundler-tests

implementing-jsc-classes-cpp