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
Install
xobotyi/cc-foundry/tailwindcss · repository language: JavaScript
git clone https://github.com/xobotyi/cc-foundry
cp -r cc-foundry/plugins/frontend/skills/tailwindcss ~/.claude/skills/tailwindcssnpx skillfed install xobotyi/cc-foundry/tailwindcssFrequently 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)
Read as markdown · JSON record · Browse the source repository
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