-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Comments
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 :) |
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": { Could this be the reason, why it is not working in my case? |
Providing a reproduction with vue-cli is totally fine, happy to troubleshoot from that. |
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 |
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;
} |
Any insights on this? |
Seeing this as well using the postcss compat 7 build |
Same thing, also while using |
#4078 pinpoints the problem, let's continue there. |
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:
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:
The responsive prefixes are ignored, all values are generated without @media queries.
The text was updated successfully, but these errors were encountered: