Question 270042 in CSS Question posted in
Some basic documentation can be found here.

How to overwrite tailwind class on old class like !important in css

I used text-[20px] in <Badge/>, but it’s overridden by another css class, how can I override tailwind the class

<Badge
  label="1"
  className='w-[30px] h-[30px] p-6 ml-4 text-[20px]'
  style={{ lineHeight: '20px'}}>
  1
</Badge>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If you want to override the text-[20px] on other classes, you can write the class like this:

     <Badge
   label="1"
   className='w-[30px] h-[30px] p-6 ml-4 [&&]:text-[20px]'
   style={{ lineHeight: '20px'}}>
   1
 </Badge>


  2. 0

    Another thing I found handy when dealing with situations like this is that using your own custom class could increase the specificity and override Tailwind’s base styles.

    In your case, you can define a class in your stylesheet like:

    .badge-text {
 @apply text-[20px];
}

    Then your template can go as:

    <Badge
  label="1"
  className='w-[30px] h-[30px] p-6 ml-4 badge-text'
  style={{ lineHeight: '20px'}}>
  1
</Badge>

    This has worked for me in many cases.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search