{"enrichment":{"faq":[{"a":"tailwindcss-fundamentals-v4 teaches Tailwind CSS v4's CSS-first configuration model and Rust-powered engine. It covers installation across Vite and PostCSS, @theme-based theming, custom utilities and variants, and the shift from JavaScript config to pure CSS. The skill includes v3-to-v4 migration guidance and reference for new v4 utilities like text-shadow and container queries.","q":"What is the tailwindcss-fundamentals-v4 skill about?"},{"a":"tailwindcss-fundamentals-v4 covers Vite installation as a primary setup method. Install Tailwind via npm, create your CSS entry point with Tailwind directives, and configure your Vite project to process CSS. The v4 installation leverages zero-config content detection, automatically scanning your project files without explicit content paths in most cases.","q":"How do you install tailwindcss v4 with Vite?"},{"a":"In tailwindcss-fundamentals-v4, the @theme directive enables CSS-first configuration by letting you define design tokens directly in CSS. Instead of JavaScript config objects, @theme accepts CSS custom properties to customize colors, spacing, typography, and other design system values. This approach makes theming more maintainable and closer to standard CSS practices.","q":"What is the @theme directive in tailwind v4 CSS-first configuration?"},{"a":"tailwindcss-fundamentals-v4 addresses v3-to-v4 migration by highlighting breaking changes and new patterns. Key shifts include moving from tailwind.config.js to CSS-first @theme directives, adopting the new Rust engine for faster builds, and updating custom utilities to use @utility and @variant directives instead of plugin APIs.","q":"How do you migrate from Tailwind v3 to v4?"},{"a":"tailwindcss-fundamentals-v4 introduces v4's 2025 features including text-shadow utilities, container queries for component-scoped responsive design, OKLCH color support for modern color spaces, and fluid typography for responsive scaling. These additions support modern design systems and improve responsive design workflows beyond traditional breakpoint-based approaches.","q":"What new features does Tailwind v4 add for 2025?"},{"a":"tailwindcss-fundamentals-v4 teaches custom utilities via the @utility directive and custom variants using @variant in your CSS. Rather than JavaScript plugin functions, v4 lets you define reusable CSS patterns directly. This CSS-first approach integrates with the @theme system and works seamlessly with the Rust engine for optimal performance.","q":"How do you create custom utilities and variants in Tailwind v4?"}],"shadow_tags":["css-first-config","rust-powered-engine","perceptual-colors","responsive-typography","custom-directives","modern-tooling","design-system-ready","zero-config-detection"],"summary_rewrite":"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."},"files":[{"bytes":13105,"path":"plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/SKILL.md","sha256":"0dede232692c183c0c3493a337d01a586275dc585b961790a171523d54c724d6","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4/9c802b58/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"tailwindcss-fundamentals-v4","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"Tomlord1122/tomtom-skill/tailwind-ssr"},{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"oakoss/agent-skills/tailwind"},{"id":"xobotyi/cc-foundry/tailwindcss"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode"},{"id":"EnderPuentes/ai-agent-skills/tailwind-css"},{"id":"itzzritik/OrderWorder/tailwind-patterns"},{"id":"liuchiawei/agent-skills/tailwind-patterns"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"tailwindcss-fundamentals-v4"},"version":"9c802b58"}