Skip to content

add tab-* utilities#20022

Open
RobinMalfait wants to merge 1 commit intomainfrom
feat/add-tab
Open

add tab-* utilities#20022
RobinMalfait wants to merge 1 commit intomainfrom
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, arbitrary values, and theme values coming from --tab-size-*:

Class CSS
tab-2 tab-size: 2;
tab-[12px] tab-size: 12px;
tab-github tab-size: var(--tab-size-github);
@theme {
  --tab-size-github: 8;
}

tab-github:

.tab-github {
  tab-size: var(--tab-size-github);
}

This doesn't ship with any --tab-size-* theme keys out of the box.

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

Safe to merge — the change adds a new, self-contained utility with no modifications to existing logic.

The implementation follows the exact same pattern used by every comparable functional utility in the file (line-clamp, columns, etc.), the invalid-value cases are all explicitly tested and return empty output, and isPositiveInteger already accepts 0 (per its num >= 0 check) so edge cases are covered. The property-order insertion and intellisense snapshot are both consistent with the rest of the codebase.

No files require special attention.

Reviews (2): Last reviewed commit: "add `tab-*` utilities" | Re-trigger Greptile

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 7, 2026

Review Change Stack
No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d6cfc527-fc3e-4dc8-925e-6ffd7fa0b97f

📥 Commits

Reviewing files that changed from the base of the PR and between 11a266d and 3b559e6.

⛔ 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
✅ Files skipped from review due to trivial changes (1)
  • packages/tailwindcss/src/property-order.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/tailwindcss/src/utilities.test.ts
  • packages/tailwindcss/src/utilities.ts

Walkthrough

This pull request adds support for a new tab-* functional utility class in Tailwind CSS. The implementation spans three coordinated changes: the tab-size CSS property is registered in the property ordering configuration, the tab-* functional utility is implemented to map theme values and bare positive integers to the tab-size property, and comprehensive tests verify the output for both theme-backed and bracketed values as well as command-line execution.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely summarizes the main change: adding new tab-* utilities to the Tailwind CSS package.
Description check ✅ Passed The description provides comprehensive details about the new tab-* utilities, their functionality, usage examples, and test plan, all directly related to the changeset.
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.

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