design-system
design-system copied to clipboard
chore(deps): update dependency tailwindcss to v4
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| tailwindcss (source) | 3.4.17 -> 4.1.5 |
Release Notes
tailwindlabs/tailwindcss (tailwindcss)
v4.1.5
Added
- Support using
@tailwindcss/upgradeto upgrade between versions of v4.* (#17717) - Add
h-lh/min-h-lh/max-h-lhutilities (#17790) - Transition
display,visibility,content-visibility,overlay, andpointer-eventswhen usingtransitionto simplify@starting-styleusage (#17812)
Fixed
- Don't scan
.geojsonor.dbfiles for classes by default (#17700, #17711) - Hide default shadow suggestions when missing default shadow theme keys (#17743)
- Replace
_with.in theme suggestions for@utilityif surrounded by digits (#17733) - Skip
color-mix(…)when opacity is100%(#17815) - PostCSS: Ensure that errors in imported stylesheets are recoverable (#17754)
- Upgrade: Bump all Tailwind CSS related dependencies during upgrade (#17763)
- Upgrade: Don't add
-to variants starting with@(#17814) - Upgrade: Don't format stylesheets that didn't change when upgrading (#17824)
v4.1.4
Added
- Add experimental
@tailwindcss/oxide-wasm32-wasitarget for running Tailwind in browser environments like StackBlitz (#17558)
Fixed
- Ensure
color-mix(…)polyfills do not cause used CSS variables to be removed (#17555) - Ensure
color-mix(…)polyfills create fallbacks for theme variables that reference other theme variables (#17562) - Fix brace expansion in declining ranges like
{10..0..5}and{0..10..-5}(#17591) - Work around a Chrome rendering bug when using the
skew-*utilities (#17627) - Ensure container query variant names can contain hyphens (#17628)
- Ensure
shadow-inherit,inset-shadow-inherit,drop-shadow-inherit, andtext-shadow-inheritinherit the shadow color (#17647) - Ensure compatibility with array tuples used in
fontSizeJS theme keys (#17630) - Ensure folders with binary file extensions in their names are scanned for utilities (#17595)
- Upgrade: Convert
fontSizearray tuple syntax to CSS theme variables (#17630)
v4.1.3
Fixed
- Show warning when using unsupported bare value data type in
--value(…)(#17464) - PostCSS: Ensure changes to the input CSS file don't generate stale output when using Turbopack (#17554)
- Ensure classes are detected in Ruby's
%wsyntax in Slim templates (#17557)
v4.1.2
Fixed
- Don't rely on the presence of
@layer baseto polyfill@property(#17506) - Support setting multiple inset shadows as arbitrary values (#17523)
- Fix
drop-shadow-*utilities that are defined with multiple shadows (#17515) - PostCSS: Fix race condition when two changes are queued concurrently (#17514)
- PostCSS: Ensure files containing
@tailwind utilitiesare processed (#17514) - Ensure the
color-mix(…)polyfill creates fallbacks even when using colors that cannot be statically analyzed (#17513) - Fix slow incremental builds with
@tailwindcss/viteand@tailwindcss/postscss(especially on Windows) (#17511) - Vite: Fix missing CSS file in Qwik setups (#17533)
v4.1.1
Fixed
- Disable padding in
@source inline(…)brace expansion (#17491) - Inject polyfills after
@importand body-less@layer(#17493) - Ensure
@tailwindcss/clidoes not contain an import forjiti(#17502)
v4.1.0
Added
- Add
details-contentvariant (#15319) - Add
inverted-colorsvariant (#11693) - Add
noscriptvariant (#11929, #17431) - Add
items-baseline-lastandself-baseline-lastutilities (#13888, #17476) - Add
pointer-none,pointer-coarse, andpointer-finevariants (#16946) - Add
any-pointer-none,any-pointer-coarse, andany-pointer-finevariants (#16941) - Add safe alignment utilities (#14607)
- Add
user-validanduser-invalidvariants (#12370) - Add
wrap-anywhere,wrap-break-word, andwrap-normalutilities (#12128) - Add
@source inline(…)and@source not inline(…)(#17147) - Add
@source not "…"(#17255) - Add
text-shadow-*utilities (#17389) - Add
mask-*utilities (#17134) - Add
bg-{position,size}-*utilities for arbitrary values (#17432) - Add
shadow-*/<alpha>,inset-shadow-*/<alpha>,drop-shadow-*/<alpha>, andtext-shadow-*/<alpha>utilities to control shadow opacity (#17398, #17434) - Add
drop-shadow-<color>utilities (#17434) - Improve compatibility with older versions of Safari and Firefox (#17435)
Fixed
- Follow symlinks when resolving
@sourcedirectives (#17391) - Don't scan ignored files for classes when changing an ignored file triggers a rebuild using
@tailwindcss/cli(#17255) - Support negated
contentrules in legacy JavaScript configuration (#17255) - Interpret syntax like
@("@​")md:…as@md:…in Razor files (#17427) - Disallow top-level braces, top-level semicolons, and unbalanced parentheses and brackets in arbitrary values (#17361)
- Ensure the
--theme(…)function still resolves to the CSS variables when using legacy JS plugins (#17458) - Detect used theme variables in CSS module files (#17433, #17467)
Changed
- Ignore
node_modulesby default (can be overridden by@source …rules) (#17255) @sourcerules that include file extensions or point insidenode_modules/folders no longer consider your.gitignorerules (#17255)- Deprecate
bg-{left,right}-{top,bottom}in favor ofbg-{top,bottom}-{left,right}utilities (#17378) - Deprecate
object-{left,right}-{top,bottom}in favor ofobject-{top,bottom}-{left,right}utilities (#17437)
v4.0.17
Fixed
- Fix an issue causing the CLI to hang when processing Ruby files (#17383)
v4.0.16
Added
- Add support for literal values in
--value('…')and--modifier('…')(#17304)
Fixed
- Fix class extraction followed by
(in Pug (#17320) - Ensure
@keyframesfor theme animations are emitted if they are referenced following a comma (#17352) - Vite: Ensure that updates to an imported CSS file are properly propagated after updating source files (#17347)
- Pre process
Slimtemplates embedded in Ruby files (#17336) - Error when input and output files resolve to the same file when using the CLI (#17311)
- Add missing suggestions when
--spacing(--value(integer, number))is used (#17308) - Add
::-webkit-details-markerpseudo tomarkervariant (#17362)
v4.0.15
v4.0.14
Fixed
- Do not extract candidates with JS string interpolation
${(#17142) - Fix extraction of variants containing
.character (#17153) - Fix extracting candidates in Clojure/ClojureScript (#17087)
v4.0.13
Fixed
- Fix Haml pre-processing (#17051)
- Ensure
.nodeand.wasmfiles are not scanned for utilities (#17123) - Improve performance when scanning JSON files (#17125)
- Fix extracting candidates containing dots in Haml, Pug, and Slim pre processors (#17094, #17085, #17113)
- Don't create invalid CSS when encountering a link wrapped in square brackets (#17129)
v4.0.12
Fixed
- Vite: Fix
url(…)rebasing in transitively imported CSS files (#16965) - PostCSS: Rebase
url(…)s in imported CSS files (#16965) - Ensure utilities are sorted based on their actual property order (#16995)
- Ensure strings in Pug and Slim templates are handled correctly (#17000)
- Ensure classes between
}and{are properly extracted (#17001) - Add
razor/cshtmlpre processing (#17027) - Ensure extracting candidates from JS embedded in a PHP string works as expected (#17031)
v4.0.11
Fixed
- Ensure classes containing
--are extracted correctly (#16972) - Ensure classes containing numbers followed by dash or underscore are extracted correctly (#16980)
- Ensure arbitrary container queries are extracted correctly (#16984)
- Ensure classes ending in
[are extracted in Slim templating language (#16985) - Ensure arbitrary variables with data types are extracted correctly (#16986)
v4.0.10
Added
- Add
col-<number>androw-<number>utilities forgrid-columnandgrid-row(#15183)
Fixed
- Ensure
not-*does not remove:is(…)from variants (#16825) - Ensure
@keyframesare correctly emitted when using a prefix (#16850) - Don't swallow
@utilitydeclarations when@applyis used in nested rules (#16940) - Ensure
outline-hiddenbehaves likeoutline-noneoutside of forced colors mode (#16943) - Allow
!importanton CSS variables again (#16873) - Vite: Do not crash when encountering an
.svgfile with#or?in the filename (#16957) - Ensure utilities are properly detected within square brackets (#16306)
- Ensure utilities are properly detected using Angular's conditional class binding syntax (#16306)
- Ensure utilities starting with numbers are properly extracted from Slim templates (#16306)
- Discard arbitrary property candidates that have guaranteed-invalid property names (#16306)
Changed
- Removed
max-w-autoandmax-h-autoutilities as they generate invalid CSS (#16917) - Replaced the existing candidate extractor with a brand new extractor to improve maintainability, correctness, and performance (#16306)
v4.0.9
Fixed
- Make JS APIs available to plugins and configs in the Standalone CLI (#15934)
- Vite: Don't crash when importing a virtual module from JavaScript that ends in
.css(#16780) - Fix an issue where
@reference "…"would sometimes omit keyframe animations (#16774) - Ensure
z-*!utilities are properly marked as!important(#16795) - Read UTF-8 CSS files that start with a byte-order mark (BOM) (#16796)
- Ensure nested functions in selectors used with JavaScript plugins are not truncated (#16802)
Changed
- Emit variable fallbacks when using
@reference "…"instead of duplicate CSS variable declarations (#16774)
v4.0.8
Added
- Allow
@importwiththeme(…)options for stylesheets that contain more than just@themerules (#16514)
Fixed
- Don't add
!importantto CSS variable declarations when using the important modifier (#16668) - Vite: Ignore files and directories specified in your
.gitignorefile when using automatic source detection(#16631) - Vite: Don't rely on the module graph for detecting candidates to ensure setups with multiple Vite builds work as expected (#16631)
- Vite: Ensure Astro production builds always contain classes used in client-only components (#16631)
- Vite: Always scan raw file contents for utility classes before any other transforms have been applied to ensure utility classes are scanned without any additional escaping (#16631)
- Ensure utilities with more declarations are always sorted before utilities with fewer declarations when utilities only define CSS variables (#16715)
- Only include
translate-z-pxutilities once in compiled CSS (#16718)
Changed
v4.0.7
Fixed
- Export
tailwindcss/lib/util/flattenColorPalette.jsfor backward compatibility (#16411) - Fix sorting of numeric utility suggestions when they have different magnitudes (#16414)
- Show suggestions for fractions in IntelliSense (#16353)
- Don’t replace
_in suggested theme keys (#16433) - Ensure
--default-outline-widthcan be used to change theoutline-widthvalue of theoutlineutility (#16469) - Ensure drop shadow utilities don't inherit unexpectedly (#16471)
- Export config and plugin types from
tailwindcss/pluginfor backward compatibility (#16505) - Ensure JavaScript plugins that emit nested rules referencing the utility name work as expected (#16539)
- Statically link Visual Studio redistributables in
@tailwindcss/oxideWindows builds (#16602) - Ensure that Next.js splat routes are scanned for classes (#16457)
- Pin exact version of
tailwindcssin@tailwindcss/*packages (#16623) - Upgrade: Report errors when updating dependencies (#16504)
- Upgrade: Ensure a
darkModeJS config setting with block syntax converts to use@slot(#16507) - Upgrade: Ensure the latest version of
tailwindcssand@tailwindcss/postcssare installed when upgrading (#16620)
v4.0.6
Fixed
- Revert change to no longer include theme variables that aren't used in compiled CSS (#16403)
- Upgrade: Don't migrate
blurtoblur-smwhen used with Next.js<Image placeholder="blur" />(#16405)
v4.0.5
Added
- Add
@theme staticoption for always including theme variables in compiled CSS (#16211)
Fixed
- Remove rogue
console.logfrom@tailwindcss/vite(#16307)
Changed
- Don't include theme variables that aren't used in compiled CSS (#16211)
v4.0.4
Fixed
- Fix a crash when setting JS theme values to
null(#16210) - Ensure escaped underscores in CSS variables in arbitrary values are properly unescaped (#16206)
- Ensure that the
containersJS theme key is added to the--container-*namespace (#16169) - Ensure theme
@keyframesare generated even if an--animation-*variable spans multiple lines (#16237) - Vite: Skip parsing stylesheets with the
?commonjs-proxyflag (#16238) - Fix
order-firstandorder-lastfor Firefox (#16266) - Fix support for older instruction sets on Linux x64 builds of the standalone CLI (#16244)
- Ensure
NODE_PATHis respected when resolving JavaScript and CSS files (#16274) - Ensure Node addons are packaged correctly with FreeBSD builds (#16277)
- Fix an issue where
@variantinside a referenced stylesheet could cause a stack overflow (#16300)
v4.0.3
Fixed
- Fix incorrect removal of
@import url();(#16144)
v4.0.2
Fixed
- Only generate positive
grid-cols-*andgrid-rows-*utilities (#16020) - Ensure escaped theme variables are handled correctly (#16064)
- Ensure we process Tailwind CSS features when only using
@referenceor@variant(#16057) - Refactor gradient implementation to work around prettier/prettier#17058 (#16072)
- Vite: Ensure hot-reloading works with SolidStart setups (#16052)
- Vite: Fix a crash when starting the development server in SolidStart setups (#16052)
- Vite: Don't rebase URLs that appear to be aliases (#16078)
- Vite: Transform
<style>blocks in HTML files (#16069) - Prevent camel-casing CSS custom properties added by JavaScript plugins (#16103)
- Do not emit
@keyframesin@theme reference(#16120) - Discard invalid declarations when parsing CSS (#16093)
- Do not emit empty CSS rules and at-rules (#16121)
- Handle
@variantwhen at the top-level of a stylesheet (#16129)
v4.0.1
Added
- Include
:openpseudo-class in existingopenvariant (#15349)
Fixed
- Remove invalid
min-w/h-noneutilities (#15845) - Discard CSS variable shorthand utilities that don't use valid CSS variables (#15738)
- Ensure font-size utilities with
nonemodifier have a line-height set e.g.text-sm/none(#15921) - Ensure font-size utilities with unknown modifier don't generate CSS (#15921)
- Don’t suggest font weight utilities more than once (#15857)
- Suggest container query variants (#15857)
- Disable bare value suggestions when not using the
--spacingvariable (#15857) - Ensure suggested classes are properly sorted (#15857)
- Don’t look at .gitignore files outside initialized repos (#15941)
- Find utilities when using the Svelte class shorthand syntax across multiple lines (#15974)
- Find utilities when using the Angular class shorthand syntax (#15974)
- Find utilities when using functions inside arrays (#15974)
- Ensure that
@tailwindcss/browserdoes not pollute the global namespace (#15978) - Ensure that
tailwind-mergeis not scanned when using the Vite plugin (#16005) - Ensure CSS theme variables are available within shadow roots (#15975)
- Fix crash when project lives in the
/directory (#15988) - Ensure custom variants have a non-empty selector list (#16009)
- Upgrade: Ensure JavaScript config files on different drives are correctly migrated (#15927)
- Upgrade: Migrate
leading-[1]toleading-none(#16004) - Upgrade: Do not migrate arbitrary leading utilities to bare values (#16004)
v4.0.0
Added
- New high-performance engine — where full builds are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
- Designed for the modern web — built on cutting-edge CSS features like cascade layers, registered custom properties with
@property, andcolor-mix(). - Simplified installation — fewer dependencies, zero configuration, and just a single line of code in your CSS file.
- First-party Vite plugin — tight integration for maximum performance and minimum configuration.
- Automatic content detection — all of your template files are discovered automatically, with no configuration required.
- Built-in import support — no additional tooling necessary to bundle multiple CSS files.
- CSS-first configuration — a reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
- CSS theme variables — all of your design tokens exposed as native CSS variables so you can access them anywhere.
- Dynamic utility values and variants — stop guessing what values exist in your spacing scale, or extending your configuration for things like basic data attributes.
- Modernized P3 color palette — a redesigned, more vivid color palette that takes full advantage of modern display technology.
- Container queries — first-class APIs for styling elements based on their container size, no plugins required.
- New 3D transform utilities — transform elements in 3D space directly in your HTML.
- Expanded gradient APIs — radial and conic gradients, interpolation modes, and more.
- @starting-style support — a new variant you can use to create enter and exit transitions, without the need for JavaScript.
- not-* variant — style an element only when it doesn't match another variant, custom selector, or media or feature query.
- Even more new utilities and variants — including support for
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.
Configuration
📅 Schedule: Branch creation - "before 4am on the first day of the month" in timezone Europe/Zurich, Automerge - At any time (no schedule defined).
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this PR and you won't be reminded about this update again.
- [ ] If you want to rebase/retry this PR, check this box
This PR was generated by Mend Renovate. View the repository job log.