Skip to content

Migrate from infix to prefix#42203

Merged
mdo merged 4 commits intov6-devfrom
v6-prefix-infix
Mar 21, 2026
Merged

Migrate from infix to prefix#42203
mdo merged 4 commits intov6-devfrom
v6-prefix-infix

Conversation

@mdo
Copy link
Member

@mdo mdo commented Mar 18, 2026

Credit due where credit is due—Tailwind's prefix syntax is better. This migrates us to use it all over the project. One thing I've realized is our responsive utilities having an infix is confusing for where the infix appears and what not. Infix also being buried within the class is annoying for parsing classes IMO.

  • Replace the breakpoint infix pattern (e.g., .d-md-none, .col-lg-6) with a prefix pattern using an escaped colon (e.g., .md\:d-none, .lg\:col-6),
  • Rename breakpoint-infix() to breakpoint-prefix() and add css-escape-ident() for leading-digit breakpoints like 2xl
  • Update generate-utility(), grid, and all component/helper loops
  • Update containers, navbar, offcanvas, tables, list-group, stepper, dialog, sticky, and stacks responsive classes
  • Update SCSS and JS tests
  • Update all docs

@mdo mdo added the js label Mar 18, 2026
@mdo mdo requested a review from a team as a code owner March 18, 2026 05:39
@mdo mdo added the css label Mar 18, 2026
@mdo mdo requested a review from a team as a code owner March 18, 2026 05:39
@mdo mdo added this to v6.0.0 Mar 18, 2026
@github-project-automation github-project-automation bot moved this to Inbox in v6.0.0 Mar 18, 2026
@mdo mdo force-pushed the v6-prefix-infix branch from d054283 to cdb75f9 Compare March 21, 2026 03:20
mdo added 4 commits March 21, 2026 14:11
- Replace the breakpoint infix pattern (e.g., `.d-md-none`, `.col-lg-6`) with a prefix pattern using an escaped colon (e.g., `.md\:d-none`, `.lg\:col-6`),
- Rename `breakpoint-infix()` to `breakpoint-prefix()` and add
  `css-escape-ident()` for leading-digit breakpoints like `2xl`
- Update `generate-utility()`, grid, and all component/helper loops
- Update containers, navbar, offcanvas, tables, list-group, stepper,
  dialog, sticky, and stacks responsive classes
- Update SCSS and JS tests
- Update all docs

Made-with: Cursor
@mdo mdo force-pushed the v6-prefix-infix branch from 706e219 to 4410296 Compare March 21, 2026 21:30
@mdo mdo merged commit 66c4b5b into v6-dev Mar 21, 2026
12 checks passed
@mdo mdo deleted the v6-prefix-infix branch March 21, 2026 21:40
@pricop
Copy link

pricop commented Mar 22, 2026

This change is amazing, especially since using breakpoints with utility classes that use semantic values (e.g: shadow-lg-sm) was pretty confusing. I had this issue with several utilities. Thank you!

@pricop
Copy link

pricop commented Mar 22, 2026

Not sure if this is possible, but any chance of states getting the same treatment? breakpoint:state:selector, having it separated by colon is so much cleaner, e.g: hover:selector.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants