Css tailwindcss define a class that contains many classNames

Question

Let's consider the following example:

<div class="text-xs text-slate-600 uppercase font-bold tracking-wider">Text</div>

I have this div so defined, subsequently in other parts of code I use the same classes.

Is there a way to define the name of a class, which contains all the classes?

For example pseudocode:

.myComponentName {
use .text-xs 
use .text-slate-600 
use .uppercase 
use .font-bold 
use .tracking-wider
}

For example in react js I could define a component and solve the problem.

function myComponentName(text) {
 return <div class="text-xs text-slate-600 uppercase font-bold tracking-wider">{text}</div>
}

But I was wondering are there other solutions?

I was reading about this, it could be the solution: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

Konrad · Accepted Answer · 2022-10-25 17:14:38Z

4

I would suggest reading the entire page about reusing styled

But for this specific problem read this

HTML:

<!-- Before extracting a custom class -->
<div class="standard-text">Text</div>

CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .standard-text {
    @apply text-xs text-slate-600 uppercase font-bold tracking-wider;
  }
}

answered Oct 25, 2022 at 17:14

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Over a year ago

Isn't that the same article I was referring to at the end?

Konrad Over a year ago

@Paul yes, sorry, didn't see that

Collectives™ on Stack Overflow

Css tailwindcss define a class that contains many classNames

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related