Replies: 2 comments 6 replies
-
|
So right now you can technically opt-out of them by importing the layers separately and just not putting them in layers: - @import "tailwindcss/preflight" layer(base);
- @import "tailwindcss/utilities" layer(utilities);
+ @import "tailwindcss/preflight";
+ @import "tailwindcss/utilities";...but there will be downsides because we've adjusted the specificity of a few things with the assumption that things would be in layers and wouldn't conflict with each other. With third-party CSS though you could always put those styles in a layer as well right? Even if it's a CDN thing you are doing at run-time you can do something like: <html>
<head>
<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/css/pikaday.min.css" layer(components);
</style>
</head>
<!-- ... -->There's some talk of supporting importing stylesheets directly into a layer when using |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for those points! For further context, I mainly work with Tailwind in the context of Drupal themes and WordPress block themes, which are PHP content management systems that have their own "base" or "component" CSS for elements/components that would be output via Yes, I did research and come across that proposal too before this post. Great minds think a like perhaps? |
Beta Was this translation helpful? Give feedback.
-
|
In my case, it wouldn't be possible. I'm trying to use TW to style Obsidian plugins, and I have no control over how the app inserts its styles. Even if I did, I would not want to mess around with the app styles anyway. |
Beta Was this translation helpful? Give feedback.
-
|
We're rendering pdfs using prince using tailwindcss and styles shared with a web frontend. There's simply no support for @layer or @Property (at least that's what it already complained about) in that engine. Sounds like we'll need to stick with tailwind 3 |
Beta Was this translation helpful? Give feedback.
-
|
So basically anyone that has to deal with third party css that you have zero controll are stucked in Tailwind v3? Jesus |
Beta Was this translation helpful? Give feedback.
-
|
How do you opt out of css layers using @tailwindcss/vite plugin? |
Beta Was this translation helpful? Give feedback.
-
|
Change your CSS like so: -@import "tailwindcss";
+@import "tailwindcss/theme.css";
+@import "tailwindcss/preflight.css";
+@import "tailwindcss/utilities.css"; |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Since Astro uses Vite under the hood, I was able to use this in an Astro project. |
Beta Was this translation helpful? Give feedback.
-
The problem with CSS cascade layers is if other third-party CSS (that are supposed to be component level) does not use CSS layers, they will take precedence over CSS in any cascade layer.
One could argue that
!importantwould solve this, but then one cannot use!importantto increase specificity of one utility over another, since they all already have!important.Beta Was this translation helpful? Give feedback.
All reactions