raphi011/tailwind-css
claude/plugins/tailwind-css/skills/tailwind-css/SKILL.md
Use when writing Tailwind CSS v4 code, configuring Tailwind v4 with @theme or @variant directives, migrating from Tailwind v3 to v4, setting up CSS-native config (no tailwind.config.js), defining semantic color tokens, implementing dark mode with class-based @variant, creating design system tokens, or styling components with utility classes. Covers @import "tailwindcss", @theme blocks, @variant, @layer, CSS custom properties for colors, and common layout/component patterns.
tools
Updated May 6, 2026
$ install --global
skillsauthnpx skillsauth add raphi011/skills tailwind-cssInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 6:21 PM33.5s3 files scanned
SKILL.md
- name:
- tailwind-css
- description:
- >-
- version:
- 1.0.0
- tags:
- [css, frontend, design]
- targets:
- [claude]
Tailwind CSS v4
Tailwind v4 replaces JS config with CSS-native configuration. No tailwind.config.js — pure CSS with new directives. PostCSS is optional via @tailwindcss/postcss.
For v3→v4 migration details, see references/v3-to-v4-migration.md.
For design system patterns (colors, typography, spacing, components), see references/design-system.md.
CSS-Native Setup
/* input.css */
@import "tailwindcss";
@theme {
--color-primary-50: #eef2ff;
--color-primary-100: #e0e7ff;
--color-primary-500: #6366f1;
--color-primary-600: #4f46e5;
--color-primary-700: #4338ca;
/* ... full scale ... */
--color-surface: #ffffff;
--color-surface-dark: #0f172a;
--color-border: #e2e8f0;
--color-border-dark: #334155;
--color-muted: #64748b;
}
@variant dark (&:where(.dark, .dark *));
@layer base {
body {
@apply bg-surface text-slate-900 dark:bg-surface-dark dark:text-slate-100;
}
}
★ Insight ─────────────────────────────────────
@import "tailwindcss"replaces the old@tailwind base/components/utilitiesdirectives@themedefines design tokens as CSS custom properties — Tailwind auto-generates utility classes from them (e.g.,--color-primary-500→bg-primary-500,text-primary-500)@variant darkwith&:where(.dark, .dark *)enables class-based dark mode via a.darkclass on the root element─────────────────────────────────────────────────
Semantic Color Tokens
Define semantic names in @theme instead of using raw Tailwind colors:
| Token | Purpose | Example classes |
|-------|---------|-----------------|
| primary-* | Brand, CTAs, active states | bg-primary-500, text-primary-600 |
| accent-* | Highlights, badges, warnings | bg-accent-100, text-accent-700 |
| surface / surface-dark | Page/card backgrounds | bg-surface dark:bg-surface-dark |
| border / border-dark | Borders, dividers | border-border dark:border-border-dark |
| muted | Secondary/helper text | text-muted |
<!-- Good: semantic tokens -->
<div class="bg-surface text-muted border-border">
<!-- Avoid: raw colors for themed elements -->
<div class="bg-white text-gray-500 border-gray-200">
Dark Mode
Class-based dark mode using @variant dark:
<!-- Toggle .dark on <html> or <body> -->
<html class="dark">
<!-- Dual-mode styling -->
<div class="bg-surface dark:bg-surface-dark border-border dark:border-border-dark">
<p class="text-slate-700 dark:text-slate-300">
Always add dark: variants for backgrounds, borders, and text colors on every visual element.
Prevent FOUC by applying the theme class before first paint (inline script or server-rendered class).
Common Layout Patterns
<!-- Two-column: sidebar + content -->
<div class="flex gap-6">
<aside class="w-64 shrink-0">...</aside>
<div class="min-w-0 flex-1">...</div>
</div>
<!-- Full-height with scroll -->
<div class="flex h-[calc(100vh-8rem)] flex-col">
<div class="flex-1 overflow-y-auto">...</div>
<div><!-- sticky footer/input --></div>
</div>
<!-- Responsive padding -->
<div class="px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl">
Component Patterns
<!-- Card -->
<div class="rounded-2xl bg-white p-4 ring-1 ring-slate-200
dark:bg-slate-900 dark:ring-slate-800">
<!-- Primary button -->
<button class="rounded-xl bg-primary-500 px-4 py-2.5 text-sm font-semibold
text-white shadow-sm hover:bg-primary-600 active:bg-primary-700">
<!-- Input field -->
<input class="w-full rounded-xl bg-white px-3 py-2.5 text-sm ring-1 ring-slate-300
placeholder:text-slate-400 focus:ring-2 focus:ring-primary-500
dark:bg-slate-900 dark:ring-slate-700 dark:text-white">
<!-- Prose / markdown -->
<article class="prose prose-sm max-w-none dark:prose-invert">
Elevation: ring vs border
Prefer ring-1 over border — rings don't affect layout sizing, preventing 1px shifts on hover/focus state changes.
<!-- Cards: ring for borders -->
<div class="ring-1 ring-slate-200 dark:ring-slate-800">
<!-- Dark mode elevation: replace shadows with subtle rings -->
<div class="shadow-md dark:shadow-none dark:ring-1 dark:ring-white/10">
| Level | Usage | Classes |
|-------|-------|---------|
| None | Default cards | ring-1 ring-slate-200 dark:ring-slate-800 |
| Low | Raised cards | shadow-sm |
| Medium | Dropdowns | shadow-md |
| High | Modals | shadow-xl |
Build Options
Tailwind v4 supports three build methods:
# Standalone CLI (no Node.js required)
tailwindcss -i input.css -o output.css
tailwindcss -i input.css -o output.css --watch
# Vite plugin
# vite.config.ts
import tailwindcss from "@tailwindcss/vite";
export default { plugins: [tailwindcss()] };
# PostCSS plugin (for Webpack, Parcel, etc.)
# npm install @tailwindcss/postcss
# postcss.config.js: { plugins: { "@tailwindcss/postcss": {} } }
Key Conventions
- Semantic tokens — define colors in
@theme, use token names (primary-*,surface,border) not raw palette names - Dark mode on every element — always pair light styles with
dark:variants - No CSS-in-JS — style with utility classes; extract components (React/Vue/templ) instead of CSS component classes
- Minimal custom CSS — only
@themetokens and@layer baseresets in your input CSS ring-1overborder— for borders that shouldn't affect layout- Mobile-first — default styles are mobile; use
sm:,md:,lg:for larger screens
Related Skills
raphi011/revealjs
development
VerifiedTrustedCommunity
Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
SKILL.mdUpdated May 21, 2026
raphi011/tailwind
tools
VerifiedTrustedCommunity
Use when writing Tailwind CSS v4 code, configuring Tailwind v4 with @theme or @variant directives, migrating from Tailwind v3 to v4, setting up CSS-native config (no tailwind.config.js), defining semantic color tokens, implementing dark mode with class-based @variant, creating design system tokens, or styling components with utility classes. Covers @import "tailwindcss", @theme blocks, @variant, @layer, CSS custom properties for colors, and common layout/component patterns.
SKILL.mdUpdated May 20, 2026
raphi011/db
development
VerifiedTrustedCommunity
Use whenever working with SurrealDB — writing queries, defining schemas, configuring indexes, debugging errors, handling record IDs, using the Go SDK, or discussing SurrealDB architecture. Activate on any mention of SurrealDB, SurrealQL, HNSW indexes, or surreal-related Go SDK code.
SKILL.mdUpdated May 20, 2026
raphi011/tui-debug
development
VerifiedTrustedCommunity
Use when visually verifying terminal UI rendering, testing TUI interactions, debugging Bubbletea display issues, or when asked to "test the TUI", "screenshot the terminal", "check what the TUI looks like", or "visually verify". Requires Kitty terminal with allow_remote_control and macOS for screencapture.
SKILL.mdUpdated May 20, 2026