Menu
Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
X (Twitter) full-stack automation — multi-platform trend search, AI content generation, auto-posting, DM monitoring, daily reports. Use when user mentions X/Twitter ops, searching trends, writing tweets, checking DMs, or viewing reports.
Manages free AI models from OpenRouter for OpenClaw. Automatically ranks models by quality, configures fallbacks for rate-limit handling, and updates openclaw.json. Use when the user mentions free AI, OpenRouter, model switching, rate limits, or wants to reduce AI costs.
Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture. Invoke for resource modeling, versioning strategies, pagination patterns, error handling standards.
Scaffold, test, document, and debug REST and GraphQL APIs. Use when the user needs to create API endpoints, write integration tests, generate OpenAPI specs, test with curl, mock APIs, or troubleshoot HTTP issues.
Use when designing database schemas, writing migrations, optimizing SQL queries, fixing N+1 problems, creating indexes, setting up PostgreSQL, configuring EF Core, implementing caching, partitioning tables, or any database performance question.
Automate deployments, manage infrastructure, and build reliable CI/CD pipelines.
| name | Tailwind CSS |
| description | Write Tailwind utility classes with proper responsive design, dark mode, and configuration. |
| metadata | {"clawdbot":{"emoji":"🌊","requires":{"bins":["npx"]},"os":["linux","darwin","win32"]}} |
content array in tailwind.config.js must include ALL files with classes—missing paths = missing styles in production"./src/**/*.{js,jsx,ts,tsx,html}" covers nested directoriesbg-${color}-500 won't be detected—use complete class names or safelistmd: applies at medium AND abovesm:hidden md:block means hidden on small, visible on medium+—not "only on medium"extend.screens to add without replacingdark: prefix requires darkMode: 'class' in config—won't work with default media strategy if you need manual toggle<html> or <body>, not on individual componentsdark:bg-gray-900 only applies when ancestor has class="dark"darkMode: 'media' uses prefers-color-schemehover:, focus:, active: work as expectedgroup-hover: requires group class on parent—child reacts to parent hoverpeer-focus: requires peer class on sibling AND sibling must come first in DOMdark:hover:bg-gray-700 applies on hover in dark modebg-[#1da1f2] for one-off colors—brackets for any arbitrary valuew-[calc(100%-2rem)] for calc expressionsgrid-cols-[1fr_2fr_1fr] underscores for spaces in values[mask-type:alpha] for unsupported CSS properties@apply in component CSS loses responsive/state variants—@apply hover:bg-blue-500 doesn't work as expected@apply matters unlike HTML classes—later utilities override earlier@apply—easier to maintain, better tree-shaking@apply, keep it simple: base styles onlyextend adds to defaults: extend: { colors: { brand: '#xxx' } } keeps all existing colorscolors: { brand: '#xxx' } removes all default colorstheme() function in CSS: border-color: theme('colors.gray.200')! prefix forces important: !mt-4 generates margin-top: 1rem !importantimportant: true in config makes ALL utilities important—avoid, breaks third-party CSSimportant: '#app' scopes specificity to selector—better than global importantclass="px-4 px-6" last one wins in stylesheet, not in HTML—both get applied, cascade decidesoverflow-hidden with rounded-* on parent with absolute childrenh-screen doesn't account for mobile browser chrome—use h-dvh (dynamic viewport height)truncate needs width constraint or max-w-* to actually truncatesafelist with patterns like bg-*—defeats tree-shaking@layer components for reusable component styles—proper cascade order