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
Decision gist · record as of 2026-06-18
Tailwind CSS v4 Fundamentals guides you through installing and configuring Tailwind v4 with CSS-first setup. 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.
Use it when
- tailwindcss-fundamentals-v4 covers Vite installation as a primary setup method.
- In tailwindcss-fundamentals-v4, the @theme directive enables CSS-first configuration by letting you define design tokens directly in CSS.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4 · repository language: Shell
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 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)
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
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 › “Install and set up Tailwind CSS v4 in a new or existing project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
Create layouts that adapt seamlessly across devices using mobile-first principles and Tailwind CSS. This skill covers breakpoint configuration, fluid typography with CSS clamp, container queries for component-level responsiveness, and production-ready layout patterns.
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.
This skill covers Tailwind v4 browser-runtime styling for HyperFrames compositions scaffolded with `hyperframes init --tailwind`. It explains CSS-first theme tokens, utility classes, dynamic class safety, and when to compile to CSS instead of relying on the runtime. Use it to debug missing styles, migrate from v3 syntax, and ensure deterministic frame rendering.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
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.
More skills tailwindcss (MIT) · tailwind-v3-to-v4-migration (MIT) · tailwindcss-debugging (MIT) · Frontend Ui Skill (unlicensed) · Tailwind Design System (AGPL-3.0) · tailwind-best-practices (MIT) · Tailwind Design System (unlicensed) · Tailwind (unlicensed)