Skip to content

Add tab-* utilities#20022

Merged
RobinMalfait merged 3 commits into
mainfrom
feat/add-tab
May 8, 2026
Merged

Add tab-* utilities#20022
RobinMalfait merged 3 commits into
mainfrom
feat/add-tab

Conversation

@RobinMalfait
Copy link
Copy Markdown
Member

@RobinMalfait RobinMalfait commented May 7, 2026

This PR adds new tab-* utilities.

The tab-* utilities set the tab-size property. They support positive integer bare values, and arbitrary values:

Class CSS
tab-2 tab-size: 2;
tab-[12px] tab-size: 12px;

This also adds tab-size to the property order near the other text layout properties.

Test plan

  1. Added new tab-* utility tests
  2. Updated the intellisense snapshot
  3. Other existing tests still pass

@RobinMalfait RobinMalfait requested a review from a team as a code owner May 7, 2026 11:25
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 7, 2026

Confidence Score: 5/5

The change is a small, self-contained utility addition that mirrors the existing zoom-* pattern and does not touch any shared or load-bearing code paths.

The implementation is consistent with the established functionalUtility + bare-integer pattern used by zoom. The property-order placement, intellisense suggestions, and negative-case test coverage all look correct. No shared state, no breaking changes, and the only files touched outside the new utility itself are the snapshot and the property-order list.

No files require special attention.

Reviews (4): Last reviewed commit: "update changelog" | Re-trigger Greptile

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 7, 2026

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 32d82df3-cfad-4f77-8447-32fe832a556d

📥 Commits

Reviewing files that changed from the base of the PR and between 4d2b5a1 and 30c4a84.

⛔ Files ignored due to path filters (1)
  • packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (4)
  • CHANGELOG.md
  • packages/tailwindcss/src/property-order.ts
  • packages/tailwindcss/src/utilities.test.ts
  • packages/tailwindcss/src/utilities.ts

Walkthrough

This pull request adds a new tab-* functional utility that emits tab-size rules, registers tab-size in the property ordering, adds tab suggestion values (2, 4, 8), updates the changelog to list tab-*, and includes tests verifying theme-backed, numeric, bracketed, and CLI variants.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'add tab-* utilities' directly and clearly describes the main change: introducing new tab-* utilities, which is the core objective of this PR.
Description check ✅ Passed The description is directly related to the changeset, explaining what the tab-* utilities do, providing usage examples, and outlining the test plan—all matching the actual file changes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with 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.

Inline comments:
In `@packages/tailwindcss/src/utilities.test.ts`:
- Around line 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.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: aae9d4ce-8ab9-46ff-a1a9-56693791eb61

📥 Commits

Reviewing files that changed from the base of the PR and between 754e751 and 11a266d.

⛔ Files ignored due to path filters (1)
  • packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (3)
  • packages/tailwindcss/src/property-order.ts
  • packages/tailwindcss/src/utilities.test.ts
  • packages/tailwindcss/src/utilities.ts

Comment on lines +11850 to +11858
await run([
'tab',
'-tab-2',
'tab-2.5',
'tab-1/2',
'tab-unknown',
'tab-2/foo',
'tab-[12px]/foo',
]),
Copy link
Copy Markdown
Contributor

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 packages/tailwindcss/src/utilities.ts
Comment thread packages/tailwindcss/src/utilities.test.ts
@RobinMalfait RobinMalfait changed the title add tab-* utilities Add tab-* utilities May 8, 2026
@RobinMalfait RobinMalfait merged commit 59936c6 into main May 8, 2026
7 checks passed
@RobinMalfait RobinMalfait deleted the feat/add-tab branch May 8, 2026 19:22
RobinMalfait added a commit to tailwindlabs/tailwindcss.com that referenced this pull request May 11, 2026
Direct link:
https://tailwindcss-com-git-feat-document-tab-utilities-tailwindlabs.vercel.app/docs/tab-size

This PR documents the `tab-*` utilities introduced by:
tailwindlabs/tailwindcss#20022

The syntax highlighting is done by the MDX pipeline we have (shiki) but
because if that the MDX looks a bit... insane. It did allow us to go
from MDX to JSX to MDX and back.

<img width="1694" height="1856" alt="image"
src="https://github.com/user-attachments/assets/fa13ffef-ec86-4e66-8dd2-fd8cc5901b14"
/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant