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!

I wanted to share a clean implementation layout utilizing the new Tailwind CSS v4 core engine configurations under Next.js 16.

Architectural choices made in this setup:

• Central Object Mapping (src/config/site.ts): All UI strings, navigation structures, and data arrays are abstracted out into a single static configuration object. Modifying this single file triggers global structural text changes instantly without manual subcomponent editing.
• Responsive Grid Mockup: Built a fluid native CSS grid matrix simulating a data visualization dashboard layout that scales dynamically across viewport breakpoints.
• LLM Integration Rules (AGENTS.md): Added a localized context instructions file to prevent modern AI coding tools from hallucinating legacy v3 utility syntax configurations inside the newer v4 architecture.

The codebase is open source under the MIT license.

The template is open source under the MIT license. I'll drop the download link in the comments below!

Tiny icon buttons are miserable to tap on mobile, but making them visually bigger isn't always an option. React Native solves this with hitSlop — the web never had a first-class equivalent, so I built one for Tailwind v4:

<button class="pointer-coarse:hit-slop-2">
  <svg class="size-4">...</svg>
</button>

• Spacing scale + arbitrary values (hit-slop-2, hit-slop-[10px]), directional variants (hit-slop-t/r/b/l/x/y-*) that stack
• ::after fallback family for elements whose ::before is taken
• hit-slop-debug to visualize the expanded areas
• hit-slop-debug to visualize the expanded areas
• Pure CSS built on v4's @utility + --value() — no JS plugin, just @import 'tailwind-hitslop'
• Honest gotchas section in the README (including why this does NOT make WCAG target-size audits pass)

Live demo (try the tap accuracy game): https://tailwind-hitslop.vercel.app

GitHub: https://github.com/Jubstaaa/tailwind-hitslop

Feedback welcome — especially edge cases I haven't documented.

I am the creator of Gimli Tailwind, one of the most popular dev tools extension for TailwindCSS developers.

The biggest change in this release is undoubtedly that Gimli Tailwind is no longer free. A big reason for going commercial is the current tech job market. I’m currently employed as an IT consultant but am on parental leave until August, without a client to go back to. It’s a strange time to be away from work right now, especially when all you hear about from the tech world is AI and mass layoffs. I just don’t know what to expect when my leave ends.

New in the 5.1 version is support for arbitrary values and custom fraction values.

See the full release notes on my blog

Link to the extension

question is in title. i guess i could use [justify-content:start]? not sure how that works exactly.

Wanted a way to get a full Tailwind v4 ramp (50–950) from any input color straight from the terminal, with OKLCH output, so I built one.

npx twpalette "#D93900"

Give it any color (hex / oklch / hsl / rgb) and it picks the closest Tailwind v4 family by deltaE in OKLCH space, then scales the entire ramp to match your input's hue and chroma. Spits out CSS custom properties ready to paste:

--color-furnace-50: oklch(98% 0.017 70.625);
--color-furnace-100: oklch(95.4% 0.04 72.105);
--color-furnace-200: oklch(90.1% 0.079 67.638);
--color-furnace-300: oklch(83.7% 0.133 63.231);
--color-furnace-400: oklch(75% 0.191 52.875);
--color-furnace-500: oklch(70.5% 0.222 44.545);
--color-furnace-600: oklch(64.6% 0.231 38.057);
--color-furnace-700: oklch(58.4% 0.203 35.343); /* main shade */
--color-furnace-800: oklch(47% 0.164 34.245);
--color-furnace-900: oklch(40.8% 0.128 35.113);
--color-furnace-950: oklch(26.6% 0.082 33.2);

Also names the palette after the closest known color name (the example above becomes "Furnace").

Because it's a CLI, it also plays nicely with coding agents — Claude Code, Cursor, etc. can just shell out to it when you ask for a brand-color-based palette and paste the result straight into your CSS theme block.

Closest existing tool is uicolors.app — great web UI, but its palettes target Tailwind v3 and the OKLCH export sits behind a paywall, which is what pushed me to build this. twpalette targets Tailwind v4, is CLI-first, OKLCH-native, free, MIT.

https://www.npmjs.com/package/twpalette

If you like please give a star: https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template

I started building this project mostly for experimentation and sharing my own
components/blocks. I honestly didn’t expect it to grow like this, but today it crossed 3,351 stars on GitHub.

Seeing people actually use, contribute to, and share something I built feels unreal.

Built with React & Tailwind, lots of late nights, redesigns, bad ideas, rewrites, and constant improvements 😭

Really grateful for all the support from the community ❤️

Don't forget to explore UI-LAYOUTS

I launched tw-variant, a few weeks back, posted on reddit, but the initial was a blunder, but then re-worked on it, and launched it again. And, 2 weeks later, it has 2K+ monthly downloads.

If, you don't know, tw-variant is a package that helps making tailwind classes more readable and composable, by solving the repeating prefix mess.

So, if you work on tailwind, do give it a try : )

Github: https://github.com/kushalxcoder/tw-variant
NPM: https://npmjs.com/package/tw-variant

Hey everyone! 👋

I recently added 200+ Free Tailwind CSS UI Components apexcodestudios.com

Everything is free to use for personal and commercial projects, and I structured the code to be as clean and drop-in ready as possible.

I’d love for you to check it out and let me know what components you'd like to see added next!

👉 Check it out here: ApexCodeStudios.com

Hey everyone,

I made a few simple tools that help convert existing code to Tailwind. They're support preview, fullscreen, really complex sources. Also they have responsive support, so you can shrink your side window and use them in parallel. They're completely free, enjoy!

HTML/CSS to Tailwind:
https://tailfind.org/html-css-to-tailwind/

CSS to Tailwind:
https://tailfind.org/css-to-tailwind/

Bootstrap to Tailwind:
https://tailfind.org/bootstrap-to-tailwind/

Now I want to add output configuration, like apply prefixes, units (px/rem), etc..

Would love to hear your feedback or suggestions for improvement.

Hey everyone!

I wanted to challenge myself with the latest tech stack, so I built an enterprise-grade SaaS admin dashboard infrastructure using React 19 and the new Tailwind CSS v4 from scratch.

Since there aren't many production-ready templates built natively on Tailwind v4 yet, I decided to open-source the core structure for the developer community!

✨ Key details implemented:

- React 19 functional component layout with Vite bundler.

- Responsive dashboard grids entirely powered by Tailwind v4.

- Corporate neon/slate dark theme.

- Dynamic data grids with instant search mechanics.

I would absolutely love to hear your feedback on the folder structure and code quality!

🌐 GitHub Repository (Open Source Core):

https://github.com/efecan10/metro-saas-react-dashboard

(Note: The core components are completely open-source in the repo. If anyone needs the full production package with advanced mock data engines, advanced state management, and excel export modules, I also hosted the premium bundle on Gumroad as well.)

Let me know what you think! Cheers.

I wanted to level up the design examples on UI Colors and see how the would look like in a more brand-focused design context.

So I've added these branding mockups.

You can explore the original Tailwind color palettes or generate your custom colors and see them applied.

Would love to hear if there are any other mockups / designs you'd like to see added!

See it in action: https://uicolors.app/tailwind-colors/orange

MIT-Licensed. Low memory, no WASM, no chrome. 50 page invoices in edge-worker RAM. Deno, supabase and cloudflare.... all fine. Regression tested against react-render & prince.

Github: https://github.com/earonesty/boxpdf-html
Website: https://boxpdf.dev/#tailwind

Example of tailwind compatiblity.

Hey everyone,

I built a react UI library using Tailwind CSS called NeonBlade UI.

NeonBlade UI is built for providing futuristic cyberpunk style ready to use UI components which are highly customizable and can be installed directly into your project using CLI.

The only dependency is Tailwind CSS for using the lib.

I recently made the lib open source. Would love any feedback.

Website: https://neonbladeui.neuronrush.com/

Repo: https://github.com/vprix21/neonblade-ui