All solutions

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!

My solution for Interactive Rating using Next.js and Tailwind CSS. Any feedback is so welcome!

I'm new to React and practicing making React components. I would love to receive any feedback on the components and file structure. Thanks so much!

Side note: This project applies a bit of CUBE CSS by Andy Bell (https://cube.fyi). It stands for Composition, Utility, Block, and Exception. I find it a nice combination with Tailwind. CUBE could be used for repeated layouts and blocks (e.g. card, box, etc.) while Tailwind is reserved for unique styling (utilities) of each element.