DiscordSign up
SKILLS.SH

tailwindcss

Utility-first CSS framework for rapidly building custom interfaces with composed utility classes. Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries Tailwind v4 introduces CSS-first configuration using theme variables and directives ( @theme , @utility , @custom-variant ) for easier design system customization Includes dark mode support, custom style and utility creation, and content detection for automatic class scanning

INSTALLATION
npx skills add https://github.com/hairyf/skills --skill tailwindcss
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

Display & Flexbox & Grid

Topic

Description

Reference

Display

flex, grid, block, inline, hidden, sr-only, flow-root, contents

layout-display

Flexbox

flex-direction, justify, items, gap, grow, shrink, wrap, order

layout-flexbox

Grid

grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid

layout-grid

Aspect Ratio

Controlling element aspect ratio for responsive media

layout-aspect-ratio

Columns

Multi-column layout for magazine-style or masonry layouts

layout-columns

Positioning

Topic

Description

Reference

Position

Controlling element positioning with static, relative, absolute, fixed, and sticky

layout-position

Inset

Controlling placement of positioned elements with top, right, bottom, left, and inset utilities

layout-inset

Sizing

Topic

Description

Reference

Width

Setting element width with spacing scale, fractions, container sizes, and viewport units

layout-width

Height

Setting element height with spacing scale, fractions, viewport units, and content-based sizing

layout-height

Min & Max Sizing

min-width, max-width, min-height, max-height constraints

layout-min-max-sizing

Spacing

Topic

Description

Reference

Margin

Controlling element margins with spacing scale, negative values, logical properties, and space utilities

layout-margin

Padding

Controlling element padding with spacing scale, logical properties, and directional utilities

layout-padding

Overflow

Topic

Description

Reference

Overflow

Controlling how elements handle content that overflows their container

layout-overflow

Images & Replaced Elements

Topic

Description

Reference

Object Fit & Position

Controlling how images and video are resized and positioned

layout-object-fit-position

Tables

Topic

Description

Reference

Table Layout

border-collapse, table-auto, table-fixed

layout-tables

Transforms

Topic

Description

Reference

Transform Base

Base transform utilities for enabling transforms, hardware acceleration, and custom transform values

transform-base

Translate

Translating elements on x, y, and z axes with spacing scale, percentages, and custom values

transform-translate

Rotate

Rotating elements in 2D and 3D space with degree values and custom rotations

transform-rotate

Scale

Scaling elements uniformly or on specific axes with percentage values

transform-scale

Skew

Skewing elements on x and y axes with degree values

transform-skew

Typography

Topic

Description

Reference

Font & Text

Font size, weight, color, line-height, letter-spacing, decoration, truncate

typography-font-text

Text Align

Controlling text alignment with left, center, right, justify, and logical properties

typography-text-align

List Style

list-style-type, list-style-position for bullets and markers

typography-list-style

Visual

Topic

Description

Reference

Background

Background color, gradient, image, size, position

visual-background

Border

Border width, color, radius, divide, ring

visual-border

Effects

Box shadow, opacity, mix-blend, backdrop-blur, filter

visual-effects

SVG

fill, stroke, stroke-width for SVG and icon styling

visual-svg

Effects & Interactivity

Topic

Description

Reference

Transition & Animation

CSS transitions, animation keyframes, reduced motion

effects-transition-animation

Visibility & Interactivity

Visibility, cursor, pointer-events, user-select, z-index

effects-visibility-interactivity

Form Controls

accent-color, appearance, caret-color, resize

effects-form-controls

Scroll Snap

scroll-snap-type, scroll-snap-align for carousels

effects-scroll-snap

Features

Dark Mode

Topic

Description

Reference

Dark Mode

Implementing dark mode with the dark variant and custom strategies

features-dark-mode

Migration

Topic

Description

Reference

Upgrade Guide

Migrating from v3 to v4, breaking changes, rename mappings

features-upgrade

Customization

Topic

Description

Reference

Custom Styles

Adding custom styles, utilities, variants, and working with arbitrary values

features-custom-styles

Functions & Directives

Tailwind's CSS directives and functions for working with your design system

features-functions-directives

Content Detection

How Tailwind detects classes and how to customize content scanning

features-content-detection

Best Practices

Topic

Description

Reference

Utility Patterns

Managing duplication, conflicts, important modifier, when to use components

best-practices-utility-patterns

Key Recommendations

  • Use utility classes directly in markup - Compose designs by combining utilities
  • Customize with theme variables - Use @theme directive to define design tokens
  • Mobile-first responsive design - Use unprefixed utilities for mobile, prefixed for breakpoints
  • Use complete class names - Never construct classes dynamically with string interpolation
  • Leverage variants - Stack variants for complex conditional styling
  • Prefer CSS-first configuration - Use @theme, @utility, and @custom-variant over JavaScript configs
BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card