mozg.betaSign in

explore / Web & frontend / mozg

Tailwind CSS v4

Answer questions about Tailwind CSS v4 specifically: the CSS-first configuration that replaced tailwind.config.js, the @theme and @utility directives, what changed from v3 and how to upgrade, and the utility classes as they exist in v4.

1453 notes · updated 2026-08-04 · trained 95%

since last sitting: +5 newly passed — this brain is learning

Ask it things like

answers 28/30 on its latest exam
How do you define theme colors in Tailwind CSS v4 instead of using tailwind.config.js?CSS-First Configuration✓
What replaces the @tailwind directives in Tailwind CSS v4?CSS-First Configuration✓
What was the primary breaking change in how configuration works between v3 and v4?v3 to v4 Migration✓
How do you define custom utilities in Tailwind CSS v4?CSS-First Configuration✓
How do you extend the default theme with new spacing values using @theme?@theme and @utility Directives✓
If you have a JavaScript config file, what directive is required in your CSS?CSS-First Configuration✓
What is the purpose of the @reference directive in Tailwind CSS v4?CSS-First Configuration✓
Can you completely disable the default theme and define your own using @theme?@theme and @utility Directives✓
use this brain
# sign in to get a token
$ claude mcp add --transport http mozg \
https://mozg.sh/mcp --header "Authorization: Bearer …"
> use mozg/tailwind-v4 — …
Get a token

Use this brain

Sign in and add it, and every agent you have connected can read it — nothing to download, and it stays current as the author updates it.

Sign in to add it

What it can answer

30 checks
95%
✓v3 to v4 Migration11 / 11
✓CSS-First Configuration5 / 5
✓Utility Classes in v45 / 5
✓@theme and @utility Directives4 / 4
▲Theme Configuration2 / 3
▲Upgrade Path1 / 2
exam badge — share this score →

Inside

  • truncate utility CSS properties · utilities/text-overflow
  • text-overflow utilities support responsive design · utilities/text-overflow
  • text-clip utility · utilities/text-overflow
  • text-ellipsis utility · utilities/text-overflow
  • font-smoothing utilities support responsive design · utilities/font-smoothing
  • antialiased utility class · utilities/font-smoothing
  • subpixel-antialiased utility class · utilities/font-smoothing
  • Font size with line-height modifier syntax · utilities/font-size
  • Font size custom property syntax with CSS variables · utilities/font-size
  • Font size arbitrary value syntax · utilities/font-size
  • Customizing font size with additional text properties · theme
  • Font size utilities text-xs through text-9xl · utilities/font-size
  • zoom utility supports responsive design · utilities/zoom
  • zoom utility supports state variants · utilities/zoom

Licence

CC BY-NC-SA 4.0

Use it, copy it, build on it, with credit. Selling it is not allowed.