Tailwindcss Fundamentals V4

This gets Claude up to speed on Tailwind v4's complete rewrite: Rust engine, CSS-first config with @theme instead of tailwind.config.js, and the new @utility and @variant directives for custom classes. You'll want it active when setting up v4 projects, migrating from v3, or when you're writing @theme blocks and getting confused about the new OKLCH color format. The source material is thorough on the breaking changes (goodbye theme() function, hello var()) and covers the Vite plugin setup, zero-config content detection, and built-in PostCSS features. Honestly, the CSS-first approach feels cleaner than JavaScript config once you adjust to it, and the 10x performance claim from the Oxide engine is legit in practice.

skills.sh installs: 393
GitHub stars: 61
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add josiahsiegel/claude-plugin-marketplace --skill tailwindcss-fundamentals-v4 --agent claude-code

Installs into .claude/skills of the current project.

Files

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)
Plugins	JS files	@plugin directive
Custom utilities	JS config	@utility directive
PostCSS imports	postcss-import	Built-in
Autoprefixer	Required	Built-in
CSS nesting	postcss-nested	Built-in
Content detection	Explicit config	Automatic

Installation

Vite Projects (Recommended)

npm install -D tailwindcss @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()]
})

PostCSS Projects

npm install -D tailwindcss @tailwindcss/postcss

SKILL.md on GitHub

Details

Repository: github.com/josiahsiegel/claude-plugin-marketplace
Categories: Frontend Development, Documentation, Debugging, CLI & Terminal
First seen: Jun 3, 2026