Skip to content

grid-cols not expanded correctly #19384

@nklhtv

Description

@nklhtv

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)]"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions