Tailwind 4.0 not usable with any system that provides its own styles #15466
Replies: 4 comments 4 replies
-
|
I asked about this too in #13188. |
Beta Was this translation helpful? Give feedback.
-
|
Yes bumped into this too with v4. Creates precedence mess with native Creates broken situations where tailwind classes on an element no longer apply. I think we need an option to turn layers off. |
Beta Was this translation helpful? Give feedback.
-
|
i am also running into this problem.. months later.. are there any new findings? |
Beta Was this translation helpful? Give feedback.
-
|
I've been working around it by removing the layer from utilities: Change your CSS like so: -@import "tailwindcss";
+@layer theme, base, components,
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css"; |
Beta Was this translation helpful? Give feedback.
-
|
exactly same solution here, integrating Tailwind v4 into Vitepress (latest v1.6.3) without applying any layers: -@import 'tailwindcss';
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css";
+@import "tailwindcss/utilities.css"; |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
not sure if this is a good solution but I fixed it by adding utilities into my app wrapper class so it became |
Beta Was this translation helpful? Give feedback.
-
|
#13188 (comment) --> #13188 (reply in thread) Btw, all imports must be at the top of the file. This nested import definitely won't work with native CSS. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm making a plugin for Obsidian. Obsidian comes with its own default set of styles. In previous versions of Tailwind, styles did not compile with layers, allowing the Tailwind styles to override default styles for elements (e.g., h1 tags).
Additionally, Obsidian adds plugin styles by taking the content of the
styles.cssand adding it directly into a<head>tag.Due to the final
styles.cssfile retaining the layers, the default global styles of Obsidian overrule tailwind utilities, making it impossible to use utility classes for text color, resizing text, etc. Tailwind 3.x had theimportantflag in its config, which, while I never used it, I assume was partly to address scenarios like this.I'm missing something, or there is some build-step configuration I can implement to change this behavior, but I haven't found anything so far. This seems a somewhat common issue (see #15074), but the Tailwind team has yet to respond. If, going forward, Tailwind is no longer suitable for projects that involve CSS from other sources, I would prefer to know sooner rather than later.
Beta Was this translation helpful? Give feedback.
All reactions