What version of Tailwind CSS are you using?
2.1.0
What version of Node.js are you using?
15.8
What browser are you using?
Chrome
What operating system are you using?
macOs
Reproduction repository
https://play.tailwindcss.com/ with "container lg:container"
Describe your issue
The container classes generate a lot of mediaqueries that are nested, redundant and unnecessary. Just using container lg:container yields this results in developer tools:
I found this problem while creating a custom plugin for container with different properties in conjunction with JIT. Before JIT I was able to circumvent all this mediaqueries by manually writing them as the variants weren't created. But with JIT it's not possible to not create the variants, so the problem emerged.
And looking into the core container plugin I found that it doesn't take into account the mediaqueries already applied.
Of course it works and it doesn't break anything but I think a cleaner output would be preferrable and also the option to write customized specific variants.
Simple example of the classes I want to generate:
// ls stands for landscape mediaquery
.container {
width: 100%,
padding-right: 1.75rem;
padding-left: 1.75rem;
}
@media (orientation: landscape) {
.ls\:container {
padding-left: 7rem;
padding-right: 9rem;
}
}This can be achieved with a plugin with the following structure, but yet again it duplicates the mediaqueries like in the example from the beginning, and it works with the latest chrome, but I think it would be preferable with a clean output.
'.container': {
width: '100%',
paddingRight: config.DEFAULT,
paddingLeft: config.DEFAULT,
[mediaquery]: {
paddingLeft: config.lsLeft,
paddingRight: config.lsRight,
},
},
What version of Tailwind CSS are you using?
2.1.0
What version of Node.js are you using?
15.8
What browser are you using?
Chrome
What operating system are you using?
macOs
Reproduction repository
https://play.tailwindcss.com/ with "container lg:container"
Describe your issue
The container classes generate a lot of mediaqueries that are nested, redundant and unnecessary. Just using container lg:container yields this results in developer tools:
I found this problem while creating a custom plugin for container with different properties in conjunction with JIT. Before JIT I was able to circumvent all this mediaqueries by manually writing them as the variants weren't created. But with JIT it's not possible to not create the variants, so the problem emerged.
And looking into the core container plugin I found that it doesn't take into account the mediaqueries already applied.
Of course it works and it doesn't break anything but I think a cleaner output would be preferrable and also the option to write customized specific variants.
Simple example of the classes I want to generate:
This can be achieved with a plugin with the following structure, but yet again it duplicates the mediaqueries like in the example from the beginning, and it works with the latest chrome, but I think it would be preferable with a clean output.