tailwindcss-fundamentals-v4
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.
Tailwind CSS v4 Fundamentals guides you through installing and configuring Tailwind v4 with CSS-first setup.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4 · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4 ~/.claude/skills/tailwindcss-fundamentals-v4npx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is the tailwindcss-fundamentals-v4 skill about?
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.
How do you install tailwindcss v4 with Vite?
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.
What is the @theme directive in tailwind v4 CSS-first configuration?
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.
How do you migrate from Tailwind v3 to v4?
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.
What new features does Tailwind v4 add for 2025?
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.
How do you create custom utilities and variants in Tailwind v4?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
Tailwind CSS v4 Fundamentals (2025/2026)
Overview
Tailwind CSS v4.0 was released January 22, 2025, featuring a complete rewrite with a Rust-based engine, CSS-first configuration, and significant performance improvements.
Key Changes from v3
| Feature | v3 | v4 |
|---|---|---|
| Configuration | JavaScript (tailwind.config.js) | CSS-first (@theme directive) |
| Engine | Node.js | Rust (10x faster) |
| Color format | hex/rgb | OKLCH (perceptually uniform) |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/references/advanced-theme-patterns.md
plugins/tailwindcss-master/skills/tailwindcss-fundamentals-v4/references/custom-utilities-guide.md