[V3] Consistent typography

[ShaungBhone]

Hi everyone,

I'm trying to use Tailwind CSS in the following way:

.text {
    @apply leading-7;

    &-3xl {
        @apply text-3xl;
    }

    &-bold{
        @apply font-bold;
    }

    &-semibold\/gray-500{
        @apply gray-500;
    }
}

My goal is to be able to write HTML like this:

<h1 class="text-3xl-bold/gray-500">Welcome to Our Platform</h1>

Because I don't want to write code so many

.text-3xl-light {
    @apply font-light text-[2.25rem] leading-10;
}

.text-3xl-normal {
    @apply font-regular text-[2.25rem] leading-10;
}

.text-3xl-medium {
    @apply font-medium text-[2.25rem] leading-10;
}

.text-3xl-semibold {
    @apply font-semibold text-[2.25rem] leading-10;
}

.text-3xl-bold-gray-500 {
    @apply font-bold text-[2.25rem] leading-10 gray-500;
}

However, it seems that Tailwind doesn't support this approach. Could someone please explain why this is the case? Also, if I've made any mistakes or if there’s a better way to achieve this, I would really appreciate your guidance.

Thank you for your help!

[wongjn]

Could someone please explain why this is the case?

You're trying to use Sass-like nesting syntax. However, Tailwind uses native CSS nesting which does not support this kind of partial indent concatenation between nesting boundaries.