display:flex does not work with custom breakpoint

[ujjaldey]

What version of Tailwind CSS are you using?

v4.0.12

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.1.0

What version of Node.js are you using?

v20.12.2

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

Reproduction URL

NA

Describe your issue

I have defined a custom breakpoint in index.css:

@import "tailwindcss";

@theme {
  --breakpoint-ml: 56rem;
}

I am trying to add the following classes on a div. I intend to display the menu on the screen larger than 896px and hidden otherwise:

<div className="hidden ml-2 ml:flex ml:text-cyan-500">
    <NavMenu onLinkClick={handleLinkClick} />
</div>

However, the div does not show up on ml breakpoint. The other classes e.g. ml:text-cyan-500 work, but not ml:flex.

On hovering over ml:flex, the generated CSS seems to be correct:

.ml\:flex {
    @media (width >= 56rem /* 896px */) {
        display: flex;
    }
}

I tried using min-[56rem]:flex and it seems to be working.

<div className="hidden ml-2 min-[56rem]:flex ml:text-cyan-500">
    <NavMenu onLinkClick={handleLinkClick} />
</div>

Do you have any idea what's wrong here? Thanks in advance!

[wongjn]

Seems to work in this Tailwind Play which could suggest it is something particular to your project. Consider providing a git repo that reproduces the unexpected behavior.

[ujjaldey]

Hi.. Sorry, I could not reply earlier.

I manged to find the cause of the issue. The issue is happening whenever I am adding another CSS file with @import "tailwindcss";.

E.g., I have another file Datepicker.css, with the following content:

@import "tailwindcss";

.react-datepicker-wrapper {
  width: 240px !important;
}

.react-datepicker-popper {
  @apply -mt-1 rounded-md border-1 border-neutral-600;
}

.react-datepicker__triangle {
  @apply hidden;
}

.custom-tailwind-calendar {
    ...
}

If I remove the import and move the content in index.css, everything works great. But as soon as I import another file with the tailwindcss import, the flex for the custom breakpoint does not work anymore.

Is it expected? How do I import the tailwindcss if I want to have separate CSS files for customizing different custom libraries?