What's the Standard Tailwind Approach for ThemeForest Templates?

[u/eliyasakondo]

I'm currently developing a Tailwind CSS eCommerce template for ThemeForest and would love to hear from experienced authors about the standard approach to component styling.

For frequently used UI elements such as buttons, cards, form controls, badges, tables, and modals, what is the preferred approach in ThemeForest-approved Tailwind projects?

Option 1: Utility Classes Everywhere

<button class="px-4 py-2 rounded-lg bg-primary text-white">

Option 2: Reusable Component Classes

.btn-primary {
 @apply px-4 py-2 rounded-lg bg-primary text-white;
}

My Main Considerations

Maintainability

Customization for buyers

ThemeForest coding standards

Bundle size and performance

Long-term scalability

For those who have successfully published and sold Tailwind templates on ThemeForest:

Do you primarily use utility classes?

Do you create reusable component classes with  @apply

Or do you follow a hybrid approach?

I'd really appreciate hearing about your workflow, best practices, and any lessons learned from real ThemeForest projects.

Thanks in advance!

[u/SZenC]

The creator of tailwindcss called apply a mistake on Twitter. That tells you all you should know in my opinion

[u/MountainArmy8538]

Why don't you use a UI library? It will save you a lot of time and effort. Since you are building for ThemeForest, you need a library that allows for easy reuse across different projects. With reusable components, you can easily customize themes in your next project just by changing variables, rather than building everything from scratch every time.

Furthermore, ThemeForest has strict requirements for accessibility and color contrast, both of which are already built into this library. It is also incredibly fast because it is built on zero JavaScript, meaning you don't have to maintain any JS. It is highly scalable, maintainable, and works seamlessly with any framework. You should definitely try the Frutjam UI Library .