{"enrichment":{"faq":[{"a":"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.","q":"What are tailwind css utility classes?"},{"a":"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.","q":"How do I configure custom utilities and design tokens in Tailwind v4?"},{"a":"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.","q":"How do I set up tailwind dark mode?"},{"a":"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.","q":"What are tailwind responsive breakpoints and how do I use them?"},{"a":"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.","q":"How do I integrate tailwindcss with React, Vue, or Svelte?"},{"a":"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\u2014they'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.","q":"What are arbitrary values in tailwindcss and when should I use them?"}],"shadow_tags":["utility-first-framework","css-preprocessor","design-tokens","responsive-design","component-styling","theme-configuration","variant-modifiers","layout-utilities","animation-transforms","accessibility-patterns"],"summary_rewrite":"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\u2014all without JavaScript config files."},"files":[{"bytes":18701,"path":"plugins/frontend/skills/tailwindcss/SKILL.md","sha256":"9bc62af17e74b22ef55b2708aaecc9945ebe5b621d7e6f3bf1597ab7f7a340c7","url":"https://skillfed.io/files/xobotyi/cc-foundry/tailwindcss/8e2f9c3b/SKILL.md"}],"id":"xobotyi/cc-foundry/tailwindcss","links":{"html":"https://skillfed.io/xobotyi/cc-foundry/tailwindcss","md":"https://skillfed.io/xobotyi/cc-foundry/tailwindcss.md","repo":"https://github.com/xobotyi/cc-foundry"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"JavaScript","last_updated":"2026-07-10","license":"MIT","name":"tailwindcss","publisher":"xobotyi","stars":18},"relations":{"similar":[{"id":"EnderPuentes/ai-agent-skills/tailwind-css"},{"id":"mastra-ai/mastra/tailwind-v4"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"rekryt/skill-tailwind/skill-tailwind"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"ofershap/tailwind-best-practices/tailwind-best-practices"},{"id":"artivilla/agents-config/tailwind-v4"}]},"slug":{"owner":"xobotyi","repo":"cc-foundry","skill":"tailwindcss"},"version":"8e2f9c3b"}