Not the day-to-day CSS-first configuration reference (tailwindcss-core owns @theme/@utility/@variant usage) and not a utility-class lookup (the category skills own that).
Tailwind CSS v4.1 Core
Documentation
Quick Reference - @theme Namespaces
| Namespace |
Generated Utilities |
--color-* |
bg-, text-, border-, fill- |
--font-* |
font-* |
--text-* |
text-xs, text-sm, text-base, etc. |
--spacing-* |
p-, m-, gap-, w-, h-* |
--radius-* |
rounded-* |
--shadow-* |
shadow-* |
--breakpoint-* |
sm:, md:, lg:, xl: |
--animate-* |
animate-spin, animate-bounce, etc. |
--ease-* |
ease-in, ease-out, ease-in-out |
v3 → v4 Breaking Changes
Removed @tailwind directives
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* v4 */
@import "tailwindcss";
Renamed utilities
| v3 |
v4 |
shadow-sm |
shadow-xs |
shadow |
shadow-sm |
rounded-sm |
rounded-xs |
rounded |
rounded-sm |
outline-none |
outline-hidden |
ring |
ring-3 |
Removed deprecated utilities
bg-opacity-* → use bg-black/50text-opacity-* → use text-black/50flex-shrink-* → use shrink-*flex-grow-* → use grow-*
Custom utilities syntax
/* v3 */
@layer utilities {
.tab-4 {
tab-size: 4;
}
}
/* v4 */
@utility tab-4 {
tab-size: 4;
}
Variables in arbitrary values
<!-- v3 -->
<div class="bg-[--brand-color]"></div>
<!-- v4 -->
<div class="bg-(--brand-color)"></div>
Important modifier position
<!-- v3 -->
<div class="!bg-red-500">
<!-- v4 -->
<div class="bg-red-500!">
Upgrade Tool
npx @tailwindcss/upgrade
Requires Node.js 20+
Detailed References
- configuration.md - Load when writing CSS-first
@theme config or using @utility/@variant/@custom-variant directives
- api-functions.md - Load when using the
--alpha()/--spacing() CSS functions or @apply
- installation-support.md - Load when installing Tailwind v4 (npm/Vite/CLI) or checking browser support
1---2name: tailwindcss-v4-23description: Use when migrating a project from Tailwind v3 to v4, mapping @theme namespaces to generated utilities, or looking up renamed/removed v3 utilities.4---56<objective>7Documents Tailwind CSS v4.1 core features relevant to a v3→v4 migration: the `@theme` namespace-to-generated-utility mapping (`--color-*`→`bg-*`/`text-*`, `--spacing-*`→`p-*`/`m-*`/`gap-*`, etc.), the v3→v4 breaking changes (removed `@tailwind` directives, renamed utilities like `shadow-sm`→`shadow-xs`, removed `bg-opacity-*`/`flex-shrink-*`, the `@utility` custom-utility syntax change, arbitrary-value variable syntax, important-modifier position), and the `@tailwindcss/upgrade` CLI tool.89Not the day-to-day CSS-first configuration reference (`tailwindcss-core` owns `@theme`/`@utility`/`@variant` usage) and not a utility-class lookup (the category skills own that).10</objective>1112# Tailwind CSS v4.1 Core1314## Documentation1516- CSS theme variables, design tokens, customization -> [tailwindcss-core](../tailwindcss-core/SKILL.md#2-theme)17- Directives (@utility, @variant, @theme, @apply) -> [tailwindcss-core](../tailwindcss-core/SKILL.md)18- Custom utilities and variants -> [tailwindcss-custom-styles](../tailwindcss-custom-styles/SKILL.md)19- Content detection (@source scanning) -> [tailwindcss-core](../tailwindcss-core/SKILL.md#3-source)20- Migration from v3 to v4 -> see "v3 → v4 Breaking Changes" section below2122## Quick Reference - @theme Namespaces2324| Namespace | Generated Utilities |25|-----------|-------------------|26| `--color-*` | bg-*, text-*, border-*, fill-* |27| `--font-*` | font-* |28| `--text-*` | text-xs, text-sm, text-base, etc. |29| `--spacing-*` | p-*, m-*, gap-*, w-*, h-* |30| `--radius-*` | rounded-* |31| `--shadow-*` | shadow-* |32| `--breakpoint-*` | sm:*, md:*, lg:*, xl:* |33| `--animate-*` | animate-spin, animate-bounce, etc. |34| `--ease-*` | ease-in, ease-out, ease-in-out |3536## v3 → v4 Breaking Changes3738### Removed @tailwind directives3940```css41/* v3 */42@tailwind base;43@tailwind components;44@tailwind utilities;4546/* v4 */47@import "tailwindcss";48```4950### Renamed utilities5152| v3 | v4 |53|----|-----|54| `shadow-sm` | `shadow-xs` |55| `shadow` | `shadow-sm` |56| `rounded-sm` | `rounded-xs` |57| `rounded` | `rounded-sm` |58| `outline-none` | `outline-hidden` |59| `ring` | `ring-3` |6061### Removed deprecated utilities6263- `bg-opacity-*` → use `bg-black/50`64- `text-opacity-*` → use `text-black/50`65- `flex-shrink-*` → use `shrink-*`66- `flex-grow-*` → use `grow-*`6768### Custom utilities syntax6970```css71/* v3 */72@layer utilities {73 .tab-4 {74 tab-size: 4;75 }76}7778/* v4 */79@utility tab-4 {80 tab-size: 4;81}82```8384### Variables in arbitrary values8586```html87<!-- v3 -->88<div class="bg-[--brand-color]"></div>8990<!-- v4 -->91<div class="bg-(--brand-color)"></div>92```9394### Important modifier position9596```html97<!-- v3 -->98<div class="!bg-red-500">99100<!-- v4 -->101<div class="bg-red-500!">102```103104## Upgrade Tool105106```bash107npx @tailwindcss/upgrade108```109110Requires Node.js 20+111112## Detailed References113114- [configuration.md](references/configuration.md) - Load when writing CSS-first `@theme` config or using `@utility`/`@variant`/`@custom-variant` directives115- [api-functions.md](references/api-functions.md) - Load when using the `--alpha()`/`--spacing()` CSS functions or `@apply`116- [installation-support.md](references/installation-support.md) - Load when installing Tailwind v4 (npm/Vite/CLI) or checking browser support
fusengine