Skip to content

Add tab-* utilities #20022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobinMalfait merged 3 commits into from
May 8, 2026
Merged

Add tab-* utilities #20022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a5db09
add `tab-*` utilities
RobinMalfait May 7, 2026
bf422f9
do not read from theme keys
RobinMalfait May 8, 2026
30c4a84
update changelog
RobinMalfait May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
- Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
- Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))
- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020))
- Add `scrollbar-gutter-*` utilities ([#20018](https://github.com/tailwindlabs/tailwindcss/pull/20018))
- Add `zoom-*` utilities ([#20020](https://github.com/tailwindlabs/tailwindcss/pull/20020))
- Add `tab-*` utilities ([#20022](https://github.com/tailwindlabs/tailwindcss/pull/20022))

### Fixed

Expand Down
3 changes: 3 additions & 0 deletions packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11492,6 +11492,9 @@ exports[`getClassList 1`] = `
"stroke-transparent/95",
"stroke-transparent/100",
"subpixel-antialiased",
"tab-2",
"tab-4",
"tab-8",
"table",
"table-auto",
"table-caption",
Expand Down
1 change: 1 addition & 0 deletions packages/tailwindcss/src/property-order.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ export default [
'text-overflow',
'hyphens',
'white-space',
'tab-size',

'color',
'text-transform',
Expand Down
44 changes: 44 additions & 0 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11865,6 +11865,50 @@ test('whitespace', async () => {
).toEqual('')
})

test('tab', async () => {
expect(
await compileCss(
css`
@theme {
--tab-size-github: 8;
}

@tailwind utilities;
`,
['tab-2', 'tab-8', 'tab-[12px]', 'tab-[3]'],
),
).toMatchInlineSnapshot(`
"
.tab-2 {
tab-size: 2;
}

.tab-8 {
tab-size: 8;
}

.tab-\\[3\\] {
tab-size: 3;
}

.tab-\\[12px\\] {
tab-size: 12px;
}
"
`)
expect(
await run([
'tab',
'-tab-2',
'tab-2.5',
'tab-1/2',
'tab-unknown',
'tab-2/foo',
'tab-[12px]/foo',
]),
Comment on lines +11900 to +11908
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add an explicit invalid assertion for tab-0.

On Line 11850 onward, the invalid-candidate list is missing tab-0, which helps lock in the “positive integer bare value” rule and prevent regressions.

Suggested test delta 
   expect(
     await run([
       'tab',
+      'tab-0',
       '-tab-2',
       'tab-2.5',
       'tab-1/2',
       'tab-unknown',
       'tab-2/foo',
       'tab-[12px]/foo',
     ]),
   ).toEqual('')
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await run([
'tab',
'-tab-2',
'tab-2.5',
'tab-1/2',
'tab-unknown',
'tab-2/foo',
'tab-[12px]/foo',
]),
await run([
'tab',
'tab-0',
'-tab-2',
'tab-2.5',
'tab-1/2',
'tab-unknown',
'tab-2/foo',
'tab-[12px]/foo',
]),
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/tailwindcss/src/utilities.test.ts` around lines 11850 - 11858, The
invalid-candidate list passed to the test helper run in utilities.test.ts is
missing an explicit case for the zero value; add 'tab-0' to the array argument
of the run([...]) call (the same array that currently contains 'tab', '-tab-2',
'tab-2.5', 'tab-1/2', 'tab-unknown', 'tab-2/foo', 'tab-[12px]/foo') so the tests
assert that a bare zero is invalid and lock in the “positive integer bare value”
rule.

Comment thread
greptile-apps[bot] marked this conversation as resolved.
).toEqual('')
})

test('text-wrap', async () => {
expect(await run(['text-wrap', 'text-nowrap', 'text-balance', 'text-pretty']))
.toMatchInlineSnapshot(`
Expand Down
10 changes: 10 additions & 0 deletions packages/tailwindcss/src/utilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2294,6 +2294,16 @@ export function createUtilities(theme: Theme) {
staticUtility('whitespace-pre-wrap', [['white-space', 'pre-wrap']])
staticUtility('whitespace-break-spaces', [['white-space', 'break-spaces']])

functionalUtility('tab', {
handleBareValue: ({ value }) => {
if (!isPositiveInteger(value)) return null
return value
},
handle: (value) => [decl('tab-size', value)],
})
Comment thread
greptile-apps[bot] marked this conversation as resolved.

suggest('tab', () => [{ values: ['2', '4', '8'] }])

staticUtility('text-wrap', [['text-wrap', 'wrap']])
staticUtility('text-nowrap', [['text-wrap', 'nowrap']])
staticUtility('text-balance', [['text-wrap', 'balance']])
Expand Down