@tailwindcss/vite
Advanced tools
Changelog
[4.0.0-alpha.27] - 2024-10-15
tailwindcss/colors.js
, tailwindcss/defaultTheme.js
, and tailwindcss/plugin.js
exports (#14595)keyframes
in JS config file themes (#14594)color
parameter in JS theme configuration callbacks (#14651)theme()
function (#14659)@config "…"
when a tailwind.config.{js,ts,…}
is detected (#14635)@media screen(…)
when running codemods (#14603)aria-*
, data-*
, and supports-*
variants from arbitrary values to bare values (#14644)!important
when stringifying CSS (#14611)display: none
on elements that use hidden="until-found"
(#14631)theme()
function resolves to the right value in some compatibility situations (#14614)matchUtilities
(#14589)addComponents
and matchComponents
(#14590)boxShadow
and animation
theme keys in JS config files are accessible under --shadow-*
and --animate-*
using the theme()
function (#14642)theme()
function with the legacy dot notation syntax (#14642)var(…)
can be used as the opacity value inside the theme([path] / [modifier])
function (#14653)font-stretch
utilities only accepts positive integer bare values (#14670)Changelog
[4.0.0-alpha.26] - 2024-10-03
blocklist
in JS config files (#14556)color-scheme
utilities (#14567)important
option in JS config files (#14448)@import "tailwindcss/tailwind.css"
to @import "tailwindcss"
in CSS files (#14514)@apply
in CSS files (#14574)bg-gradient-*
utilities to bg-linear-*
in template files (#14537)var(…)
in template files (#14526)@utility
is top-level and cannot be nested (#14525)@tailwindcss/postcss
for initial builds (#14565)@apply
and CSS functions work inside imported stylesheets (#14576)layer()
to @import
at-rules when the styles do not need to be imported into a layer (#14513)@layer
when running codemods (#14517)@tailwind
rules is wrapped with @layer base
when prepending @import "tailwindcss"
to the top of the file (#14536)Changelog
[4.0.0-alpha.25] - 2024-09-24
aria
, supports
, and data
variants defined in JS config files (#14407)@tailwindcss/upgrade
tooling (#14434)screens
in JS config files (#14415)bg-radial-*
and bg-conic-*
utilities for radial and conic gradients (#14467)shadow-initial
and inset-shadow-initial
utilities for resetting shadow colors (#14468)field-sizing-*
utilities (#14469)@apply
in CSS files (#14411)@tailwind
directives to @import
rules in CSS files (#14411, #14504)@layer utilities
and @layer components
to use @utility
in CSS files (#14455)borderRadius.*
as an alias for --radius-*
when using dot notation inside the theme()
function (#14436)anchor-size(…)
in arbitrary values (#14394)theme()
calls (#14437)inset-*
utilities for --inset-shadow-*
and --inset-ring-*
theme values (#14447)--default-transition-*
variables in transition-*
utility output (#14482)rtl
and ltr
variants work with [dir=auto]
(#14306)leading-*
, tracking-*
, and font-{weight}
value when overriding font-size (#14403)@import
resolution to speed up initial builds (#14446)var(…)
injection (#13657):hover
states on devices that support @media (hover: hover)
(#14500)Changelog
[4.0.0-alpha.24] - 2024-09-11
theme()
functions inside other @custom-media
, @container
, and @supports
rules (#14358)Config
type from tailwindcss
for JS config files (#14360)matchVariant
plugins using the @plugin
directive (#14371)tailwindcss
package is used as a PostCSS plugin (#14378)theme('someKey.DEFAULT')
when all --some-key-*
keys have a suffix (#14354)@theme default
values (#14359)border
utilities (#14370)Changelog
[4.0.0-alpha.22] - 2024-09-04
@plugin
and @config
files (#14317)default
option to @theme
to support overriding default theme values from plugins/JS config files (#14327)<style>
tags in Astro files to the Vite plugin (#14340)@config
files are relative to that file (#14314)theme()
functions are evaluated in media query ranges with collapsed whitespace (#14321)reference
values don't generate stale CSS variables (#14327)--default-font-*
and --default-mono-font-*
variables respect theme customizations in JS config files (#14344)Changelog
[4.0.0-alpha.21] - 2024-09-02
@config
(#14239)@plugin
(#14264)css.transformer
set to lightningcss
(#14269)@tailwindcss/postcss
(#14256)theme()
function when using plugins (#14262)theme()
function (#14262)tailwindcss/defaultTheme
(#14257)build --watch
(#14269)Changelog
[4.0.0-alpha.20] - 2024-08-23
addBase
plugins using the @plugin
directive (#14172)tailwindcss/plugin
export (#14173)theme()
function in plugins (#14207)addComponents
, matchComponents
, prefix
plugin APIs (#14221)tailwindcss/colors
and tailwindcss/defaultTheme
exports for use with plugins (#14221)@tailwindcss/typography
and @tailwindcss/forms
plugins (#14221)theme()
function in CSS and class names (#14177):is(…)
(#14203)Changelog
[4.0.0-alpha.19] - 2024-08-09
inline
option when defining @theme
values (#14095)inert
variant (#14129)@source
at-rule (#14078)<style>
tags in Vue files to the Vite plugin (#14158)addUtilities
and matchUtilities
plugins using the @plugin
directive (#14114)@apply
works inside @utility
(#14144)Changelog
[4.0.0-alpha.18] - 2024-07-25
addVariant
plugins with new @plugin
directive (#13982, #14008)@variant
at-rule for defining custom variants in CSS (#13992, #14008)@utility
at-rule for defining custom utilities in CSS (#14044)bg-red-[#000]
(#13970)color-mix()
(#13972)variants
and utilities
with modifiers (#13977)resize
, fill-none
, accent-none
, drop-shadow-none
, and negative hue-rotate
and backdrop-hue-rotate
utilities (#13971)data-*
and aria-*
modifiers are always quoted in the generated CSS (#14040)*
variant so those styles can be overridden by child elements (#14056)