Tailwind: v3.4.18
Reproducable at: https://play.tailwindcss.com/
Example:
<div class="grid-cols-[minmax(0,1fr)_repeat(auto-fit,minmax(0,max-content))]"></div>
<div class="grid-cols-[repeat(auto-fit,minmax(0,max-content))_minmax(0,1fr)]"></div>
Describe your issue
grid-cols-[minmax(0,1fr)_repeat(auto-fit,minmax(0,max-content))] is expanded to grid-template-columns: minmax(0,1fr) repeat(auto - fit,minmax(0,max-content)); but i expect it to expand to grid-template-columns: minmax(0,1fr) repeat(auto-fit,minmax(0,max-content));
There are additional spaces around the dash in auto - fit.
The bug does not appear when i switch to v4.
As a temprorary workaround i use css variable:
style={{ "--auto-cols": "repeat(auto-fit,minmax(0,max-content))" } as React.CSSProperties}
className="grid-cols-[minmax(0,1fr)_var(--auto-cols)]"
Tailwind: v3.4.18
Reproducable at: https://play.tailwindcss.com/
Example:
Describe your issue
grid-cols-[minmax(0,1fr)_repeat(auto-fit,minmax(0,max-content))]is expanded togrid-template-columns: minmax(0,1fr) repeat(auto - fit,minmax(0,max-content));but i expect it to expand togrid-template-columns: minmax(0,1fr) repeat(auto-fit,minmax(0,max-content));There are additional spaces around the dash in
auto - fit.The bug does not appear when i switch to v4.
As a temprorary workaround i use css variable: