tailwindcss
Advanced tools
Changelog
[4.0.0-alpha.35] - 2024-11-20
max-w-screen-*
utilities that read from the --breakpoint
namespace as deprecated utilities (#15013)var(…)
by using parentheses instead of square brackets (e.g. bg-(--my-color)
) (#15020)in-*
variant (#15025)@tailwindcss/forms
, @tailwindcss/typography
, and @tailwindcss/aspect-ratio
with the standalone CLI (#15028)addUtilities()
and addComponents()
to work with child combinators and other complex selectors (#15029)<alpha-value>
in JS configs and plugins (#15033)transition-discrete
and transition-normal
utilities for transition-behavior
(#15051)[&>*]
to the *
variant (#15022)[&_*]
to the **
variant (#15022)<alpha-value>
in JS configs (#15033)flex
is suggested (#15014)cjs
-only and esm
-only plugins (#15041)calc(…)
on just values for negative -rotate-*
utilities, not on the rotateX/Y/Z(…)
functions themselves (#15044)@config
(#15001)@import "https://fonts.google.com"
) (#15040)url(…)
(e.g.: @import url("https://fonts.google.com")
) (#15040)resolveJsId
when resolving tailwindcss/package.json
(#15041)--opacity-*
theme values (#14278)Changelog
[4.0.0-alpha.34] - 2024-11-14
0.25
by default (#14980)container
component as a utility (#14993, #14999)container
component configuration to CSS (#14999)<style>
blocks always run the expected Svelte processors when using the Vite extension (#14981)blur
, rounded
, or shadow
(#14979)@config
is injected in nearest common ancestor stylesheet (#14989)layer(…)
to imports above Tailwind directives (#14982)Changelog
[4.0.0-alpha.32] - 2024-11-11
--spacing
theme value (#14857)svh
, dvh
, svw
, dvw
, and auto
values to all width/height/size utilities (#14857)**
variant (#14903)<style>
blocks inside Svelte files when using the Vite extension (#14151)grid-cols-[subgrid]
and grid-rows-[subgrid]
to grid-cols-subgrid
and grid-rows-subgrid
(#14840)shadow
to shadow-sm
, shadow-sm
to shadow-xs
, and shadow-xs
to shadow-2xs
(#14875)inset-shadow
to inset-shadow-sm
, inset-shadow-sm
to inset-shadow-xs
, and inset-shadow-xs
to inset-shadow-2xs
(#14875)drop-shadow
to drop-shadow-sm
and drop-shadow-sm
to drop-shadow-xs
(#14875)rounded
to rounded-sm
and rounded-sm
to rounded-xs
(#14875)blur
to blur-sm
and blur-sm
to blur-xs
(#14875)theme()
usage and JS config files to use the new --spacing
multiplier where possible (#14905)@tailwindcss/postcss
(#14829)@source
containing ..
(#14831)data-focus:flex
and data-active:flex
) (#14835)--inset-ring=*
and --inset-shadow-*
variables are ignored by inset-*
utilities (#14855)url(…)
containing special characters such as ;
or {}
end up in one declaration (#14879)url()
inside imported CSS files when using Vite (#14877):deep()
in Vue) (#14871)theme()
function handles newlines and tabs in its arguments list (#14917)--inset-shadow-*
when unsetting keys like --inset-*
(#14906)px
or translate-y
) don't generate CSS (#14911)@
(#14793)@tailwindcss/postcss
next to tailwindcss
(#14830),
separator when print arbitrary values (#14838)theme(…/15%)
to modifier unless it is the entire arbitrary value of a utility (#14922),
to
in arbitrary grid-cols-*
, grid-rows-*
, and object-*
values (#14927)--drop-shadow-none
from the default theme in favor of a static drop-shadow-none
utility (#14847)shadow
to shadow-sm
, shadow-sm
to shadow-xs
, and shadow-xs
to shadow-2xs
(#14849)inset-shadow
to inset-shadow-sm
, inset-shadow-sm
to inset-shadow-xs
, and inset-shadow-xs
to inset-shadow-2xs
(#14849)drop-shadow
to drop-shadow-sm
and drop-shadow-sm
to drop-shadow-xs
(#14849)rounded
to rounded-sm
and rounded-sm
to rounded-xs
(#14849)blur
to blur-sm
and blur-sm
to blur-xs
(#14849)leading-*
utilites from --spacing-*
scale (#14857)--transition-timing-function-linear
from the default theme in favor of a static ease-linear
utility (#14880)--spacing-*
scale in favor of --spacing
multiplier (#14857)var(…)
fallbacks from theme values in utilities (#14881)font-weight
utilities and add --font-weight-*
values to the default theme (#14883)--transition-timing-function-*
variables to --ease-*
(#14886)--width-*
variables to --container-*
(#14898)--font-size-*
variables to --text-*
(#14909)--font-family-*
variables to --font-*
(#14885)--letter-spacing-*
variables to --tracking-*
(#14921)--line-height-*
variables to --leading-*
(#14925)*
variant to match v3 behavior (#14920)outline-none
with outline-hidden
, add new simplified outline-none
utility (#14926)shadow-inner
utility (#14933)--leading-none
from the default theme in favor of a static leading-none
utility (#14934)Changelog
[4.0.0-alpha.31] - 2024-10-29
source(…)
function on @tailwind utilities
or @import "tailwindcss"
(#14820)source(none)
(#14820)@source
without needing to pass a complete glob (#14820)prettier-plugin-tailwindcss
to latest version during upgrade (#14808)config()
with no arguments in plugin API (#14799)Changelog
[4.0.0-alpha.30] - 2024-10-24
not-*
with all built-in media query and supports-*
variants (#14743)not-*
with custom variants containing at-rules (#14743)group-*
, peer-*
, and has-*
with custom variants containing multiple, non-nested style rules (#14743)<div v-if="!border" />
) (#14774)exports
in their package.json
are resolved correctly (#14775)url()
function are never unescaped (#14776)@import
statements for relative CSS files are actually migrated to use relative path syntax (#14769)m-[var(--spacing-1_5)]
instead of m-[var(--spacing-1\_5)]
) (#14778)layer(…)
on @import
is only removed when @utility
is present (#14783)