diff --git a/CHANGELOG.md b/CHANGELOG.md index 552d66465533..b954bf5058c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Reset letter spacing for form elements ([#13150](https://github.com/tailwindlabs/tailwindcss/pull/13150)) - Fix missing `xx-large` and remove double `x-large` absolute size ([#13324](https://github.com/tailwindlabs/tailwindcss/pull/13324)) - Don't error when encountering nested CSS unless trying to `@apply` a class that uses nesting ([#13325](https://github.com/tailwindlabs/tailwindcss/pull/13325)) +- Ensure that arbitrary properties respect `important` configuration ([#13353](https://github.com/tailwindlabs/tailwindcss/pull/13353)) ## [3.4.1] - 2024-01-05 diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index e8e5574b5233..12690e5e6eae 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -516,7 +516,7 @@ function extractArbitraryProperty(classCandidate, context) { return [ [ - { sort, layer: 'utilities' }, + { sort, layer: 'utilities', options: { respectImportant: true } }, () => ({ [asClass(classCandidate)]: { [property]: normalized, diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index cd3fca1f9fcb..bc41ecfceb4d 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -21,6 +21,7 @@ test('important selector', () => {
+ `, }, ], @@ -132,6 +133,9 @@ test('important selector', () => { .custom-util { button: no; } + #app .\[color\:red\] { + color: red; + } #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) { text-align: left; }