Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JIT does not respect mobile-first order #4034

Closed
rowild opened this issue Apr 10, 2021 · 9 comments · Fixed by #4078
Closed

JIT does not respect mobile-first order #4034

rowild opened this issue Apr 10, 2021 · 9 comments · Fixed by #4078

Comments

@rowild
Copy link

rowild commented Apr 10, 2021

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
Copy link
Member

adamwathan commented Apr 10, 2021

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
Copy link
Author

rowild commented Apr 10, 2021

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
Copy link
Member

adamwathan commented Apr 10, 2021

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

@rowild
Copy link
Author

rowild commented Apr 10, 2021

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
Copy link
Contributor

crswll commented Apr 11, 2021

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 rowild changed the title JIT does not respect mobile-firsts-order JIT does not respect mobile-first order Apr 12, 2021
@rowild
Copy link
Author

rowild commented Apr 13, 2021

Any insights on this?

@gilesbutler
Copy link

gilesbutler commented Apr 15, 2021

Seeing this as well using the postcss compat 7 build

@fstojanac
Copy link

fstojanac commented Apr 16, 2021

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

@rowild
Copy link
Author

rowild commented Apr 20, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants