flex class not output if a breakpoint variant is used

[nathanjessen]

What version of Tailwind CSS are you using?

v2.1.0

What version of Node.js are you using?

v14.16.0

What browser are you using?

Brave

What operating system are you using?

Linux

Reproduction repository

https://github.com/nathanjessen/tailwind-jit-bug

Describe your issue

I'm using create-react-app with the instructed modifications for compatability mode and Jit mode enabled. Steps taken are outlined in my Readme file.

The flex class is not being output if I use a breakpoint variant.

Scenario 1

flex is used but no variants.
Result: flex class outputs correctly

<header className='flex'>
  <div className='block'>Some content</div>
</header>

Scenario 2

flex and md:flex are used.
Result: flex class is not output. md:flex is output

<header className='flex'>
  <div className='block md:flex'>Some content</div>
</header>

Scenario 3

flex is used but no variants. md:flex is in a comment
Result: flex doesn't output. md:flex is output

{/* md:flex */}
<header className='flex'>
  <div className='block'>Some content</div>
</header>

Scenario 4

flex and a sm:flex variant are used. I change sm:flex to md:flex
Result: nothing is output if I'm using the start script, but will output md:flex using build script.

<header className='flex'>
  <div className='block sm:flex'>Some content</div>
</header>

[nathanjessen]

For anyone running into the same issue, removing mode: "jit" from the tailwind.config.js is the simplest solution as it allows you to continue development but without the benefit of Jit.

[Suzan-Dev]

@nathanjessen just upgraded to latest version & having same issue as you mentioned. 😔

[veritymedia]

Whats strange, on one of my projects JIT does not add display: flex or grid, but on another, very similar project, JIT works flawlessly :/
I even made a repo to show the bug, turned out JIT works there... weird.
Also, it seems many JIT issues are with compat builds of tailwind.

[adxmcollins]

I'm also seeing this issue with the items-center class. Here's an element which uses it, but it's not detected by JIT.

<div className="w-full bg-gray-100 py-4 px-6 flex items-center justify-between"></div>

All of the other classes appear to be detected correctly.

[mfa777]

Hi, For me it is inline-flex doesn't work. It won't generate CSS class, but after close JIT mode, it works well.

Tailwindcss: tailwindcss/postcss7-compat@2.1.0
Node.js: v12.22.1

[CyberAndrii]

Looks like JIT generates breakpoints without @media query, e.g. should be

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
}

but is

.md\:flex {
  display: flex;
}

This happens with all classes and breakpoints.

[MikeHarrison]

I am seeing this behaviour too - classes are generated but not within a media query

[bradlc]

Hey @nathanjessen. Looks like this was caused by the bug that was fixed in #4078. I have verified that upgrading @tailwindcss/postcss7-compat in your reproduction repository fixes the issue:

yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat