@tailwindcss/node
Advanced tools
Changelog
[4.0.0] - 2025-01-21
@property
, and color-mix()
.color-scheme
, field-sizing
, complex shadows, inert
, and more.Start using Tailwind CSS v4.0 today by installing it in a new project, or playing with it directly in the browser on Tailwind Play.
For existing projects, we've published a comprehensive upgrade guide and built an automated upgrade tool to get you on the latest version as quickly and painlessly as possible.
For a deep-dive into everything that's new, check out the announcement post.
Changelog
[4.0.0-beta.10] - 2025-01-21
@variant
to use variants in your CSS (#15663)outline-color
when transitioning colors (#15690)main
and browser
fields for @tailwindcss/browser
(#15594)*
in theme namespace syntax (e.g.: --color-\*: initial;
) (#15603)@theme
options when resolving values in custom functional utilities (#15623)data-checked-[selected=1]:*
) (#15629)-outline-offset-*
utilities are suggested in IntelliSense (#15646)stdout
when --output
is set to -
or omitted with @tailwindcss/cli
(#15656)not-*
from being used with variants that have multiple sibling rules (#15689)--spacing(…)
to prevent ambiguity (#15596)Changelog
[4.0.0-beta.9] - 2025-01-09
@tailwindcss/browser
package to run Tailwind CSS in the browser (#15558)@reference "…"
API as a replacement for the previous @import "…" reference
option (#15565)--spacing(…)
, --alpha(…)
, and --theme(…)
CSS functions (#15572)place-content-between
, place-content-around
, and place-content-evenly
utilities (#15440)bg-round
and bg-space
utilities to bg-repeat-round
to bg-repeat-space
(#15462)inset-shadow-*
suggestions in IntelliSense (#15471)]
(#15503)@apply
rules are processed in the correct order (#15542)@utility
(#15573)@keyframes
contributed by JavaScript plugins when using @reference
imports (#15581)shadow
in filter: 'drop-shadow(…)'
) (#15566)theme(spacing.2)
to --spacing(2)
(#15579)theme(…)
to --theme(…)
(#15579)--container-prose
in favor of a deprecated --max-width-prose
theme variable so that *-prose
is only available for max-width utilities and only for backward compatibility (#15439)<style>
blocks (#15436)@property
fallback rules for Firefox (#15622)Changelog
[4.0.0-beta.7] - 2024-12-13
tailwindcss/lib/util/flattenColorPalette
for backward compatibility (#15318)@tailwindcss/postcss
on Windows (#15321)shadow-none
suggestion in IntelliSense (#15342)-webkit-background-clip: text
) (#15389)Changelog
[4.0.0-beta.5] - 2024-12-04
@import "…" reference
option for importing Tailwind CSS configuration details into another CSS entry point without duplicating CSS (#15228)@tailwindcss/postcss
by translating between internal data structures and PostCSS nodes directly without additional parsing or stringification (#15297)@tailwindcss/vite
(#15275)@tailwindcss/vite
(#15274)@tailwindcss/vite
in Vite 6 projects (#15274)@tailwindcss/vite
(#15279)@tailwindcss/postcss
(#15273)@tailwindcss/postcss
extension (#15273)@container
suggestion in IntelliSense (#15288)Changelog
[4.0.0-beta.4] - 2024-11-29
@tailwind utilities
is present in the CSS in @tailwindcss/postcss
and @tailwindcss/vite
(#15226)@tailwindcss/postcss
and @tailwindcss/vite
(#15226)overflow-clip
utility (#15244)backdrop-blur
to backdrop-blur-sm
and backdrop-blur-sm
to backdrop-blur-xs
(#15242)Changelog
[4.0.0-beta.3] - 2024-11-27
.group
and .peer
are prefixed when using the prefix(…)
option (#15174)--spacing-*
variables take precedence over --container-*
variables (#15180)translate-*
utilities work with arbitrary values that use calc(…)
(#15215)calc(…)
(#15215).group
and .peer
classes (#15208)layer(…)
in @import
is not first in the list of functions/conditions (#15109)