Tailwind Over SCSS: Let’s Talk About It! 🤔

[diwashbhattarai999]

Hey team! 👋

I was checking out the styling choices for the project, and I noticed we’re using SCSS. Which got me thinking—have we considered switching to Tailwind CSS? 🤔

I’m a huge fan of Tailwind and wanted to share some cool reasons why it could be a game changer for our dev workflow:

1. Super Fast Development: With utility-first classes, you don’t have to jump between multiple files. Everything’s right there in the HTML/TSX/JSX—no more going back and forth between the markup and stylesheets. It’s like coding with superpowers! ⚡

2. Smaller CSS Size: Tailwind’s JIT(Just-in-time) mode generates only the styles we need, so our final CSS bundle is smaller. No more worrying about unused CSS bloating up our project! 🌱

3. Consistent UI: Tailwind enforces a design system out-of-the-box. Things like spacing, colors, and typography are standardized, so we’ll have a consistent, polished UI across the app with minimal effort. 🎨

4. Easier to Maintain: Tailwind makes it easy to tweak the UI without diving deep into a bunch of SCSS files. Changes are more transparent, and we can keep components isolated and reusable.

5. Customizable & Scalable: Want to adjust the theme? Tailwind's configuration file makes it super simple to adjust colors, fonts, and other aspects globally, keeping things fresh and in line with our design vision. 🔧

I get that SCSS is nice for its nesting and mixins, but I feel like Tailwind might just take our styling workflow to the next level. What do you all think? 🙌

Would love to hear your thoughts—let’s chat about the pros and cons of each approach! 👀

[suman7802]

Great points about Tailwind! I’ve been loving OnceUI too and am curious—what’s the main reason we’re using SCSS here? Is it for maintainability or project structure? Would love to hear the team’s thoughts!

[lorant-one]

Hello @diwashbhattarai999 and @suman7802 — thanks for opening this up. It's a much-debated topic within Once UI, so I’ll share my perspective briefly:

• Once UI was designed to minimize dependencies, and I personally chose not to couple it to Tailwind.

• While Tailwind has clear strengths, I’ve never liked the className-heavy approach, how it handles theming, or the lack of semantic structure. I prefer using props and tokens to control layout and style.

• Our custom token system is more abstract, but it unlocks extreme flexibility with minimal overrides: including global / local theming, spacing, and responsiveness.

• Could we have built this on top of Tailwind? Probably. But philosophically, it would’ve felt misaligned with the foundation we wanted.

• Most Once UI components expose Flex props, which lets you control layout directly: no unnecessary divs, no manual nesting.

Tailwind and Once UI are solving similar problems from very different mental models. Both have strengths. We might publish a guide for using Tailwind inside a Once UI project — since it’s a common request — but I usually recommend against it. In my experience, the features people reach for Tailwind for can often be done faster and cleaner with Once UI’s system.

Appreciate the discussion. This is exactly the kind of foundational design conversation that makes the system stronger and evolve. Let me know if there's anything that you miss from Once UI and we'll integrate it in the next release!