Notification Page using Next.js and Tailwind.

Any recommendations to write cleaner code with Tailwind?

I'm applying some strategies to reduce Tailwind CSS codes, one of which is Cube-CSS by Andy Bell. (Do check this out! It is a brilliant CSS methodology).

For example, I created a stack CSS class inside the styles/compositions folder for repeated Tailwind utility classes such as flex flex-col gap-8 with modifications stack-sm (gap-4) and stack-xs (gap-2).

.stack {
   display: flex;
   flex-direction: column;
   gap: var(--col-space, 2rem);
}

.stack-sm {
   --col-space: 1rem;
}

.stack-xs {
   --col-space: .5rem;
}

Applying to the main code:

<div classname="stack"> // (flex flex-col gap-8)
   <card 1>
   <card 2>
   <card 3>
</div>

The long windy code is disheartening sometimes, but I really like using Tailwind in general as it makes coding responsive website so simple and intuitive. For instance, to adjust the padding for different screen sizes, I can just write p-4 sm:p-8 lg:p-24 instead of creating two separate @media-queries.

If you have any recommendation on how to write cleaner code with Tailwind, especially with React components, do let me know! I'm very excited to hear. Thanks, and happy coding!