WHEN: User is writing HTML/templates with Tailwind CSS classes, styling components, configuring Tailwind themes, asking about Tailwind utilities or patterns, or working with any project that uses Tailwind CSS WHEN NOT: Non-Tailwind CSS questions, general HTML/CSS without Tailwind context, questions about other CSS frameworks (Bootstrap, etc.)
Provides Tailwind CSS v4 best practices, component templates, and utility lookups for styling projects.
/plugin marketplace add gopherguides/gopher-ai/plugin install tailwind@gopher-aiThis skill inherits all available tools. When active, it can use any tool Claude has access to.
You have access to up-to-date Tailwind CSS documentation via MCP tools. Use these tools to provide accurate, current information.
Use these tools for dynamic, up-to-date Tailwind information:
mcp__tailwindcss__search_tailwind_docsUse when user asks about any Tailwind feature, utility, or concept.
Examples:
mcp__tailwindcss__get_tailwind_utilitiesUse when user needs utility classes for a specific CSS property.
Examples:
mcp__tailwindcss__get_tailwind_colorsUse when user asks about colors, palettes, or color-related utilities.
Examples:
mcp__tailwindcss__convert_css_to_tailwindUse when user has CSS they want to convert to Tailwind utility classes.
Examples:
mcp__tailwindcss__generate_component_templateUse when user needs a component template with Tailwind styling.
Examples:
When MCP tools are unavailable, use WebFetch with these URLs to get current documentation:
| Topic | URL |
|---|---|
| Installation | https://tailwindcss.com/docs/installation |
| Using Vite | https://tailwindcss.com/docs/installation/using-vite |
| Using PostCSS | https://tailwindcss.com/docs/installation/using-postcss |
| Tailwind CLI | https://tailwindcss.com/docs/installation/tailwind-cli |
| Editor Setup | https://tailwindcss.com/docs/editor-setup |
| Upgrade Guide | https://tailwindcss.com/docs/upgrade-guide |
| Topic | URL |
|---|---|
| Utility Classes | https://tailwindcss.com/docs/styling-with-utility-classes |
| Hover, Focus, States | https://tailwindcss.com/docs/hover-focus-and-other-states |
| Responsive Design | https://tailwindcss.com/docs/responsive-design |
| Dark Mode | https://tailwindcss.com/docs/dark-mode |
| Theme Variables | https://tailwindcss.com/docs/theme |
| Colors | https://tailwindcss.com/docs/colors |
| Custom Styles | https://tailwindcss.com/docs/adding-custom-styles |
| Functions & Directives | https://tailwindcss.com/docs/functions-and-directives |
| Topic | URL |
|---|---|
| Padding | https://tailwindcss.com/docs/padding |
| Margin | https://tailwindcss.com/docs/margin |
| Space Between | https://tailwindcss.com/docs/space |
| Topic | URL |
|---|---|
| Width | https://tailwindcss.com/docs/width |
| Height | https://tailwindcss.com/docs/height |
| Min/Max Width | https://tailwindcss.com/docs/min-width |
| Min/Max Height | https://tailwindcss.com/docs/min-height |
| Topic | URL |
|---|---|
| Font Family | https://tailwindcss.com/docs/font-family |
| Font Size | https://tailwindcss.com/docs/font-size |
| Font Weight | https://tailwindcss.com/docs/font-weight |
| Line Height | https://tailwindcss.com/docs/line-height |
| Text Color | https://tailwindcss.com/docs/text-color |
| Text Align | https://tailwindcss.com/docs/text-align |
| Topic | URL |
|---|---|
| Background Color | https://tailwindcss.com/docs/background-color |
| Background Image | https://tailwindcss.com/docs/background-image |
| Border Radius | https://tailwindcss.com/docs/border-radius |
| Border Width | https://tailwindcss.com/docs/border-width |
| Border Color | https://tailwindcss.com/docs/border-color |
| Box Shadow | https://tailwindcss.com/docs/box-shadow |
| Topic | URL |
|---|---|
| Opacity | https://tailwindcss.com/docs/opacity |
| Shadow | https://tailwindcss.com/docs/box-shadow |
| Blur | https://tailwindcss.com/docs/blur |
| Topic | URL |
|---|---|
| Cursor | https://tailwindcss.com/docs/cursor |
| User Select | https://tailwindcss.com/docs/user-select |
| Scroll Behavior | https://tailwindcss.com/docs/scroll-behavior |
CRITICAL: Tailwind v4 changed significantly from v3. Always use v4 syntax.
@import "tailwindcss";
This single import replaces the old @tailwind base; @tailwind components; @tailwind utilities; directives.
All theme customization is done in CSS, not JavaScript:
@theme {
/* Colors - use oklch for better color manipulation */
--color-primary: oklch(0.6 0.2 250);
--color-primary-foreground: oklch(1 0 0);
--color-secondary: oklch(0.5 0.02 250);
--color-secondary-foreground: oklch(1 0 0);
/* Semantic colors */
--color-background: oklch(1 0 0);
--color-foreground: oklch(0.145 0 0);
--color-muted: oklch(0.95 0 0);
--color-muted-foreground: oklch(0.4 0 0);
--color-border: oklch(0.9 0 0);
--color-destructive: oklch(0.55 0.25 25);
/* Font families */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Fira Code", ui-monospace, monospace;
/* Custom spacing (extends default scale) */
--spacing-18: 4.5rem;
--spacing-22: 5.5rem;
/* Custom border radius */
--radius-4xl: 2rem;
}
Tailwind auto-detects most template files. Use @source for custom paths:
@source "./templates/**/*.templ";
@source "./components/**/*.html";
@source "./src/**/*.{js,jsx,ts,tsx,vue,svelte}";
@variant dark {
--color-background: oklch(0.145 0 0);
--color-foreground: oklch(0.985 0 0);
--color-muted: oklch(0.25 0 0);
--color-muted-foreground: oklch(0.6 0 0);
--color-border: oklch(0.3 0 0);
--color-card: oklch(0.205 0 0);
}
Extract repeated patterns:
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply btn bg-primary text-primary-foreground hover:bg-primary/90;
}
.btn-secondary {
@apply btn bg-secondary text-secondary-foreground hover:bg-secondary/90;
}
.card {
@apply p-6 bg-card rounded-xl border border-border shadow-sm;
}
}
@plugin "@tailwindcss/typography";
Order utilities consistently for readability:
Order: layout → spacing → sizing → typography → colors → effects → interactive
<!-- Good: Logical order -->
<div class="flex items-center gap-4 p-4 w-full text-sm text-gray-700 bg-white shadow-sm hover:bg-gray-50 transition-colors">
<!-- Bad: Random order -->
<div class="hover:bg-gray-50 flex bg-white p-4 text-sm shadow-sm w-full gap-4 items-center text-gray-700 transition-colors">
Mobile-first: base styles for mobile, add breakpoints for larger screens.
<!-- Mobile first -->
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Breakpoints -->
sm: 640px <!-- Small devices -->
md: 768px <!-- Medium devices -->
lg: 1024px <!-- Large devices -->
xl: 1280px <!-- Extra large -->
2xl: 1536px <!-- 2X large -->
Extract when a class combination appears 3+ times:
/* Instead of repeating in HTML */
@layer components {
.flex-center {
@apply flex items-center justify-center;
}
.text-muted {
@apply text-sm text-muted-foreground;
}
}
Always prefer theme variables over hardcoded values:
<!-- Good: Uses theme variable -->
<div class="bg-primary text-primary-foreground">
<!-- Bad: Hardcoded color -->
<div class="bg-[#3b82f6] text-white">
<!-- Focus states -->
<button class="focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none">
<!-- Screen reader only -->
<span class="sr-only">Close menu</span>
<!-- Ensure contrast -->
<!-- Use oklch colors with sufficient lightness difference -->
| Wrong (v3) | Correct (v4) |
|---|---|
tailwind.config.js | CSS @theme { } directive |
@tailwind base; | @import "tailwindcss"; |
@tailwind components; | (included in import) |
@tailwind utilities; | (included in import) |
darkMode: 'class' in config | @variant dark { } in CSS |
theme.extend.colors in JS | --color-* in @theme |
content: [...] in JS | @source "..." in CSS |
<!-- Wrong: Inline styles when utility exists -->
<div style="display: flex; gap: 1rem;">
<!-- Correct -->
<div class="flex gap-4">
<!-- Wrong: px values when scale exists -->
<div class="p-[16px]">
<!-- Correct -->
<div class="p-4">
<!-- Wrong: Duplicate utilities -->
<div class="p-4 p-6">
<!-- Correct -->
<div class="p-6">
<!-- Wrong: Conflicting utilities -->
<div class="flex block">
<!-- Correct: Choose one -->
<div class="flex">
When helping with Tailwind CSS:
bg-primary not bg-blue-500User: "How do I create a button with hover effect?"
Response:
mcp__tailwindcss__get_tailwind_utilities for button-related utilities<button class="px-4 py-2 rounded-lg font-medium bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-colors">
Click me
</button>
| Class | Size |
|---|---|
| 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) |
| 3 | 0.75rem (12px) |
| 4 | 1rem (16px) |
| 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) |
| 8 | 2rem (32px) |
| 10 | 2.5rem (40px) |
| 12 | 3rem (48px) |
| 16 | 4rem (64px) |
<!-- Centered content -->
<div class="flex items-center justify-center">
<!-- Card -->
<div class="p-6 bg-card rounded-xl border border-border shadow-sm">
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Truncated text -->
<p class="truncate">Long text that will be truncated...</p>
<!-- Gradient background -->
<div class="bg-gradient-to-r from-primary to-secondary">
<!-- Fixed header -->
<header class="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm">
For the latest documentation, always refer to https://tailwindcss.com/docs
<!-- cache:end -->Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.