How do I install the Tailwind Patterns skill?

Run npx skillmds@latest add vril-labs/tailwind-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwind Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwind Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwind Patterns free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwind Patterns?

VRIL-LABS (@vril-labs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwind Patterns by vril-labs — Agent Skill

Name: Tailwind Patterns
Author: VRIL-LABS

Tailwind Patterns

Production-ready Tailwind CSS patterns for responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, dark mode, and Swiss International Style overrides for Resume Matcher.

VRIL-LABS 72fa407 2.2 KB Updated Sep 17, 2026

File contents

Tailwind CSS Component Patterns

Spacing Scale

Use increments of 4: gap-4, p-6, py-8, space-y-12, py-16, py-24

Responsive Breakpoints (Mobile-First)

Breakpoint	Min Width	Example
Base	0px	`text-base`
sm	640px	`sm:text-lg`
md	768px	`md:grid-cols-2`
lg	1024px	`lg:px-8`
xl	1280px	`xl:max-w-7xl`

Essential Patterns

// Page Container
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

// Responsive Grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

// Section
<section className="py-16 sm:py-24">
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

Swiss International Style Overrides

Resume Matcher uses Swiss Brutalist design:

// Card (Swiss)
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">

// Button (Swiss)
<button className="rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all">

// Input (Swiss)
<input className="rounded-none border-2 border-black p-3 font-sans w-full">

// Label (Swiss)
<label className="font-mono text-sm uppercase tracking-wider">

Swiss Colors

Color	Hex	Tailwind
Canvas	`#F0F0E8`	`bg-[#F0F0E8]`
Ink	`#000000`	`text-black`
Hyper Blue	`#1D4ED8`	`bg-blue-700`
Signal Green	`#15803D`	`text-green-700`
Alert Red	`#DC2626`	`text-red-600`

NEVER in Resume Matcher

rounded-sm/md/lg/xl/full (always rounded-none)
shadow-sm/md/lg/xl (always hard shadow-[...])
bg-gradient-*, blur-*, backdrop-blur
Pastel or off-palette colors

Button Sizes

Small: px-3 py-1.5 text-sm
Default: px-4 py-2
Large: px-6 py-3 text-lg

Full Reference

Complete patterns: .claude/skills/tailwind-pattern/SKILL.md Swiss design: docs/agent/design/style-guide.md

---name: tailwind-patternsdescription: Production-ready Tailwind CSS patterns for responsive layouts, cards, navigation, forms, buttons, and typography. Includes spacing scale, breakpoints, mobile-first patterns, dark mode, and Swiss International Style overrides for Resume Matcher.---# Tailwind CSS Component Patterns## Spacing ScaleUse increments of 4: `gap-4`, `p-6`, `py-8`, `space-y-12`, `py-16`, `py-24`## Responsive Breakpoints (Mobile-First)| Breakpoint | Min Width | Example ||------------|-----------|---------|| Base | 0px | `text-base` || sm | 640px | `sm:text-lg` || md | 768px | `md:grid-cols-2` || lg | 1024px | `lg:px-8` || xl | 1280px | `xl:max-w-7xl` |## Essential Patterns```tsx// Page Container<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">// Responsive Grid<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">// Section<section className="py-16 sm:py-24"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">```## Swiss International Style Overrides**Resume Matcher uses Swiss Brutalist design:**```tsx// Card (Swiss)<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">// Button (Swiss)<button className="rounded-none border-2 border-black px-4 py-2 shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all">// Input (Swiss)<input className="rounded-none border-2 border-black p-3 font-sans w-full">// Label (Swiss)<label className="font-mono text-sm uppercase tracking-wider">```### Swiss Colors| Color | Hex | Tailwind ||-------|-----|----------|| Canvas | `#F0F0E8` | `bg-[#F0F0E8]` || Ink | `#000000` | `text-black` || Hyper Blue | `#1D4ED8` | `bg-blue-700` || Signal Green | `#15803D` | `text-green-700` || Alert Red | `#DC2626` | `text-red-600` |### NEVER in Resume Matcher- `rounded-sm/md/lg/xl/full` (always `rounded-none`)- `shadow-sm/md/lg/xl` (always hard `shadow-[...]`)- `bg-gradient-*`, `blur-*`, `backdrop-blur`- Pastel or off-palette colors## Button Sizes- Small: `px-3 py-1.5 text-sm`- Default: `px-4 py-2`- Large: `px-6 py-3 text-lg`## Full ReferenceComplete patterns: `.claude/skills/tailwind-pattern/SKILL.md`Swiss design: `docs/agent/design/style-guide.md`

Frequently asked questions