-
|
Hi all. I am building a component library with tailwindcss. For that library I want to set a globally default light-theme and dark-theme font color. My Idea was to set it like so:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
@apply text-red-500;
}
}Unfortunately this overwrites some custom styles that I want to apply on html elements directly. For example I want to create a close-icon that uses some svg. Here I want to change the color of the svg by using
<div class="p-8">
<!-- this works -->
<p class="text-green-500">Green Text</p>
<!-- this doesnt work -->
<div class="w-8 h-8 rounded-full p-1 bg-gray-400 flex items-center justify-center !text-green-500">
<svg class="!text-green-500" fill="currentColor" width="16" height="16" viewBox="0 0 24 24"><path
fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>
</div>
</div>So my default red color should be changed by my css class (text-green-500). But it doesn't. I am not sure if this is expexted behaviour or a bug. I expected that the green color should be used. But even !important didn't work. As you can see, I also tried different parent elements, but no chance. So: Is this a Bug or am I doing something wrong? I also created a tiny test environment: https://play.tailwindcss.com/ws0UPBdD1X |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Setting the You could:
As an aside, Adam Wathan, creator of Tailwind advocates avoiding |
Beta Was this translation helpful? Give feedback.
Setting the
colorproperty for*means that you override the defaultinheritvalue. Thus thecurrentColorvalue on the<path>is resolved asred.500from the*rule you have, instead of inheriting from parents, that you seem to desire.You could:
color: inheriton the<path>via thetext-inheritclass<body>), socolor: inheritis left intactAs an aside, Adam Wathan, creator of Tailwind advocates avoiding
@apply:https://twitter.com/adamwathan/status/1226511611592085504
https://twitter.com/adamwathan/status/1559250403547652097