JIT does not respect mobile-first order

[rowild]

What version of Tailwind CSS are you using?

2.1.1

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS 10.15.7

Reproduction repository

https://github.com/rowild/tailwindcss211-with-jit-and-vue2

Describe your issue

A simple setup with responsive classes like this:

<div class="max-w-xs md:max-w-md lg:max-w-lg">

With jit active, the source code shows that lg:... is still the very top class that is rendered, when the browser is squeezed to its minimum.

When using with @apply:

.wrapper {
  @apply max-w-xs md:max-w-md lg:max-w-lg;
}

The responsive prefixes are ignored, all values are generated without @media queries.

[adamwathan]

Hey! Please provide a reproduction, this definitely works as we are using JIT on tailwindcss.com with tons of responsive classes with no issues. If this were broken we would have heard about it from about 5000 people by now :)

[rowild]

Thought so. I try to prepare a basic example, but I only work with Vue2 (vue-cli 4*) and have no idea how to setup a "vanilla" postcss tailwind project. In vue, there is this dependency problem going on:

"dependencies": {
"@tailwindcss/postcss7-compat": "^2.1.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.1",

Could this be the reason, why it is not working in my case?

[adamwathan]

Providing a reproduction with vue-cli is totally fine, happy to troubleshoot from that.

[rowild]

The problem description with screenshots is in the Readme of this repo (it is a pnpm setup!):

https://github.com/rowild/tailwindcss211-with-jit-and-vue2

[crswll]

I was able to replicate a similar situation with the craco setup from the docs for someone today. Here's a repo if that helps. The common theme here seems to be around postcss-7

https://github.com/crswll/jit-craco-issue

Getting CSS output like:

.sm\:p-5 {
	padding: 1.25rem;
}
.md\:p-20 {
	padding: 5rem;
}

[rowild]

Any insights on this?

[gilesbutler]

Seeing this as well using the postcss compat 7 build

[fstojanac]

Same thing, also while using tailwindcss/postcss7-compat.

[rowild]

#4078 pinpoints the problem, let's continue there.