tailwindcss
Master Tailwind CSS v4's utility-first approach with CSS-based theme configuration using @theme directives and design tokens. This skill covers class composition, responsive breakpoints, container queries, state variants, and custom utility creation—all without JavaScript config files.
Tailwind CSS helps you write and refactor utility classes and theme configuration using Tailwind v4's CSS-first approach.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-10
Tailwind CSS helps you write and refactor utility classes and theme configuration using Tailwind v4's CSS-first approach. Master Tailwind CSS v4's utility-first approach with CSS-based theme configuration using @theme directives and design tokens. This skill covers class composition, responsive breakpoints, container queries, state variants, and custom utility creation—all without JavaScript config files.
Use it when
- Tailwind v4 uses CSS-based theme configuration with @theme directives instead of JavaScript config files.
- Tailwind CSS dark mode can be configured using the `dark:` variant prefix on utility classes.
Verify before relying
Read SKILL.md below before installing (11 files). Open directory: indexed for reading, not audited.
Install
xobotyi/cc-foundry/tailwindcss · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tailwind css utility classes?
Tailwind CSS utility classes are pre-defined, single-purpose CSS classes that apply specific styles directly in your HTML markup. Instead of writing custom CSS, tailwindcss provides classes like `flex`, `p-4`, `text-lg`, and `bg-blue-500` that you compose together to build designs. This utility-first approach eliminates the need for separate stylesheets and speeds up development by letting you style elements inline.
How do I configure custom utilities and design tokens in Tailwind v4?
Tailwind v4 uses CSS-based theme configuration with @theme directives instead of JavaScript config files. Define custom utilities and design tokens directly in your CSS using @theme blocks to set colors, spacing, typography, and other design tokens. You can also create custom utilities with @utility directives, making configuration more intuitive and keeping your theme definitions in CSS rather than separate configuration files.
How do I set up tailwind dark mode?
Tailwind CSS dark mode can be configured using the `dark:` variant prefix on utility classes. Apply `dark:bg-gray-900` or `dark:text-white` to elements to style them differently when dark mode is active. You can enable dark mode detection via system preferences or manual toggling by adding a class to your root element, then tailwindcss will apply dark: prefixed styles when that class is present.
What are tailwind responsive breakpoints and how do I use them?
Tailwindcss responsive breakpoints let you apply different styles at different screen sizes using prefixes like `sm:`, `md:`, `lg:`, and `xl:`. For example, `md:flex` applies flexbox only on medium screens and above. You can customize breakpoints in your theme configuration, and tailwindcss generates responsive variants automatically, enabling mobile-first design patterns without media query syntax.
How do I integrate tailwindcss with React, Vue, or Svelte?
Tailwind CSS integrates seamlessly with any framework by installing the package, configuring PostCSS, and importing the CSS file in your project. For React, Vue, and Svelte, add tailwindcss to your PostCSS config, then import the generated CSS globally. Tailwindcss works with build tools like Vite and Webpack, scanning your template files for class names and generating only the CSS you use, regardless of framework.
What are arbitrary values in tailwindcss and when should I use them?
Tailwind CSS arbitrary values let you use custom values outside the predefined design tokens using bracket notation, like `w-[342px]` or `bg-[#1da1f2]`. Use arbitrary values when your design requires a specific value not in the theme—they're powerful for one-off customizations. However, prefer theme tokens when possible for consistency; arbitrary values are best reserved for exceptions that don't fit your design system.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Tailwind CSS v4
Utility classes are the default. Custom CSS is the escape hatch.
<prerequisite>
Tailwind builds on CSS fundamentals. Before writing or reviewing
Tailwind code, invoke the css skill to load specificity, box model,
and layout knowledge.
Skill(frontend:css)
Skip only for trivial class additions where no CSS reasoning is needed.
</prerequisite>
Tailwind CSS uses CSS-first configuration: design tokens live in @theme, custom utilities use @utility, and there is
no JavaScript configuration file. Constrain yourself to the design system; break out only with intention.
References
- Theme — [
${CLAUDE_SKILL_DIR}/references/theme-configuration.md]: Theme tokens,@themeoptions, namespace mapping, color system - **Class
(truncated - see the full file via the links below)
File tree — 11 files
plugins/frontend/skills/tailwindcss/.dev/reference-inventory.json
plugins/frontend/skills/tailwindcss/SKILL.md
plugins/frontend/skills/tailwindcss/references/backgrounds-and-effects.md
plugins/frontend/skills/tailwindcss/references/class-authoring.md
plugins/frontend/skills/tailwindcss/references/custom-utilities-and-variants.md
plugins/frontend/skills/tailwindcss/references/framework-integration.md
plugins/frontend/skills/tailwindcss/references/layout.md
plugins/frontend/skills/tailwindcss/references/sizing-and-spacing.md
plugins/frontend/skills/tailwindcss/references/theme-configuration.md
plugins/frontend/skills/tailwindcss/references/transforms-and-animations.md
plugins/frontend/skills/tailwindcss/references/typography.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write or refactor Tailwind CSS utility classes and theme configuration”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Tailwind CSS v4 is a utility-first framework for building styled interfaces by composing single-purpose classes directly in markup. Configuration happens entirely in CSS through @theme and @layer directives, eliminating separate config files. Works with Next.js, Vite, and the CLI.
skill-tailwind teaches Tailwind CSS v4 implementation across any stack using plain HTML and CSS/SCSS. It covers CSS-first configuration, design-token mapping via @theme, v3→v4 migration, and two equal organizational approaches: utility-first classes and BEM with @apply.
Master Tailwind CSS v4's CSS-first configuration model, Rust-powered engine, and modern setup across Vite and PostCSS. This skill covers installation methods, @theme-based theming, custom utilities and variants, plugin loading, and the shift from JavaScript config to pure CSS. Includes v3-to-v4 migration guidance and reference for new v4 utilities.
Design Minimal creates a single self-contained HTML file with a restrained visual system—clear hierarchy, strong spacing, and limited palette—ideal for reading-focused dashboards, briefs, handouts, and internal reports. It uses Tailwind CDN for layout and design tokens as CSS variables, with no decorative effects, responsive prefixes, or external dependencies.
This skill corrects AI agents that generate outdated Tailwind v3 code by teaching v4 syntax and configuration patterns. It covers 12 critical rules including CSS @import statements, @theme directives, modern opacity syntax, container queries, and renamed utilities, plus anti-patterns to avoid.
Master Tailwind CSS, the utility-first framework that lets you build custom interfaces by composing single-purpose classes directly in your markup. This skill covers responsive design, dark mode, theme customization, component patterns, and production-ready optimization techniques.
More skills tailwindcss-advanced-design-systems (MIT) · tailwind-best-practices (MIT) · tailwind (MIT) · hebrew-tailwind-preset (MIT) · tailwind-design-system (MIT)