Single Asterisk Only Applied To Direct Children Instead Of All Inner Element #19312
-
|
What version of Tailwind CSS are you using? 4.1.12 What build tool (or framework if it abstracts the build tool) are you using? "@tailwindcss/vite": "^4.1.12", What version of Node.js are you using? For example: v24.0.0 What browser are you using? chrome windows Describe your issue the base layer overiding the utility instead, even !important utility edit on title for better google search |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
<div class="*:text-xs!"> <!-- 3xl from * rule -->
<div class="text-green-500"> <!-- xs from *:text-xs! class -->
<div> <!-- 3xl from * rule -->
heloYou might be wanting the natural @layer base {
body {
font-size: var(--text-3xl);
line-height: var(--text-3xl--line-height);
}
}<body> <!-- 3xl from body rule -->
<div class="*:text-xs!"> <!-- 3xl from inheritance -->
<div class="text-green-500"> <!-- xs from *:text-xs! class -->
<div> <!-- xs from inheritance -->
heloOr better yet, remove the custom CSS altogether and use the class name directly: <body class="text-3xl">As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding |
Beta Was this translation helpful? Give feedback.
-
|
hi @wongjn thanks for the response and the input about About the main topic, your comment looks like actually just re-describes the problem. As you can see at below image, the
This is not an issue if you applied |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
thanks @wongjn! you are right, it was I tried with double asterisk Not knowing of css |
Beta Was this translation helpful? Give feedback.
-
|
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-all-descendants |
Beta Was this translation helpful? Give feedback.
-
|
By the way, your described case is interesting. With important, the order of the layers is reversed, which makes sense (image of ordering). I think the best approach is to avoid using important in CSS whenever possible; for everything, you can write a rule with the appropriate CSS specificity, even if it means overriding existing rules. Of course, I know this isn't a direct answer to the problem; I just wanted to share my thoughts for others. Related: |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. should be normal first, using !important is only for last resort. |
Beta Was this translation helpful? Give feedback.
*:text-xsis not being overridden since it only applies to its immediate children. If you want all inner elements, ypud use double asterisk,**:text-xs.