diff --git a/CHANGELOG.md b/CHANGELOG.md index 27613adc08c6..8de5d08e5de9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add support for `tailwindcss/colors.js`, `tailwindcss/defaultTheme.js`, and `tailwindcss/plugin.js` exports ([#14595](https://github.com/tailwindlabs/tailwindcss/pull/14595)) - Support `keyframes` in JS config file themes ([14594](https://github.com/tailwindlabs/tailwindcss/pull/14594)) +- Pretty print `!important` in declarations ([#14611](https://github.com/tailwindlabs/tailwindcss/pull/14611)) ### Fixed diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index afc1888c2659..c34a3d5af3ec 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -206,7 +206,7 @@ export function toCss(ast: AstNode[]) { // Declaration else if (node.property !== '--tw-sort' && node.value !== undefined && node.value !== null) { - css += `${indent}${node.property}: ${node.value}${node.important ? '!important' : ''};\n` + css += `${indent}${node.property}: ${node.value}${node.important ? ' !important' : ''};\n` } return css diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 8660808c12c6..b174895d6435 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1428,15 +1428,15 @@ test('important: true', async () => { expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(` ".custom { - color: red!important; + color: red !important; } .underline { - text-decoration-line: underline!important; + text-decoration-line: underline !important; } .hover\\:line-through { &:hover { @media (hover: hover) { - text-decoration-line: line-through!important; + text-decoration-line: line-through !important; } } } diff --git a/packages/tailwindcss/src/important.test.ts b/packages/tailwindcss/src/important.test.ts index fe7debf20f8e..8867062e8ac5 100644 --- a/packages/tailwindcss/src/important.test.ts +++ b/packages/tailwindcss/src/important.test.ts @@ -45,12 +45,12 @@ test('Utilities can be marked with important', async () => { expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(` ".underline { - text-decoration-line: underline!important; + text-decoration-line: underline !important; } .hover\\:line-through { &:hover { @media (hover: hover) { - text-decoration-line: line-through!important; + text-decoration-line: line-through !important; } } } @@ -74,12 +74,12 @@ test('Utilities can be wrapped with a selector and marked as important', async ( expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(` "#app { .underline { - text-decoration-line: underline!important; + text-decoration-line: underline !important; } .hover\\:line-through { &:hover { @media (hover: hover) { - text-decoration-line: line-through!important; + text-decoration-line: line-through !important; } } } diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index c61d2295119a..9a76cceba077 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -160,13 +160,13 @@ test('Utilities, when marked as important, show as important in intellisense', a expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(` [ ".underline { - text-decoration-line: underline!important; + text-decoration-line: underline !important; } ", ".hover\\:line-through { &:hover { @media (hover: hover) { - text-decoration-line: line-through!important; + text-decoration-line: line-through !important; } } }