What do large-scale Next.js apps usually use for styling — Tailwind CSS or plain CSS? And which UI libraries are most commonly used?

[duonghoanh]

Summary

Hi everyone! 👋

I'm building a large-scale project with Next.js, and I'm trying to decide the best approach for styling and UI components. I’d love to hear insights from developers working on real-world or production apps.

💡 Styling choices:

• Do most production-level teams prefer Tailwind CSS, or still rely on vanilla CSS / SCSS for flexibility and maintainability?
• Is there any performance or scalability concern I should be aware of when choosing Tailwind for large apps?

🧩 UI libraries:

Which UI component libraries are commonly used in large projects?

• shadcn/ui
• Chakra UI
• Radix UI
• MUI (Material UI)
• Or do people roll their own custom design systems?

---

Any thoughts, personal experiences, or pros/cons from your own work would be super appreciated 🙏
Thanks in advance!

Additional information

No response

Example

No response

[duonghoanh]

Have you thought about the HeroUI library?

[icyJoseph]

Just some loose thoughts... I'll re-order them later..

Large projects, depends... some companies have their own in-house design system, it can be CSS only, or with some component support, and then what you typically have to do is, find headless/style-less components, like radiux-ui, which you can customize with your company design system.

I think maintaining, and scaling accordingly in aspects such as, a11y, performance, SEO, reliability and usability, are things that you have to consider.

Do you want to spend most time maintaining a design system, than developing features?

Tailwind can make things a lot faster, at least initially. People have strong opinions on Tailwind's impact on CSS learning, and such, but from a productivity point of view, it definitely boosts the average developer's CSS output.

One issue with Tailwind in Next.js' SPAs kind of pages, is that, the more of it you use, the more the root CSS file, loaded by all files, will have to include.

And from the making components side of things, radix-ui, react-aria, etc, all of these headless/styless libraries, give you a11y compliant, performant, etc, components, that you can style/tweak yourself, with either Tailwind or CSS modules, etc. Personally, I think CSS Modules are the way to go, they complement Tailwind well, but are capable of standing on their own.

If you don't have time, budget, or a team that can maintain such components, then you should focus on delivering value, and instead, pick components off-the-shelf. I personally don't like frameworks such as MUI for this purpose, because, your app will look just like any other MUI app... these are useful to get stuff working, quickly, with styles and all, but then it is hard to customize into your own.

[HamzaAmar]

Hello!

Great questions! Choosing the right styling and UI component strategy is essential for large-scale projects. While all the solutions mentioned can work well, each comes with its own strengths and trade-offs depending on your feature support, project’s requirements, team expertise, and the consistency in approach.

I really appreciate what @icyJoseph shared; it’s a solid perspective. I'd like to add a few more points that are especially important in the context of large-scale applications:

• Team Expertise: Choose a solution that aligns with your team's strengths. Leveraging what your team knows best ensures faster development, adherence to best practices, and fewer roadblocks.

• Feature Support: Choose a solution that supports all the features your project needs, such as RTL (right-to-left) language support, dark mode, and theming. Sometimes it’s even beneficial for the UI library to come with its own design language, making it easier for designers to create mockups.

• Project Requirements: Consider your project’s core focus and architectural setup—whether it prioritizes accessibility, performance, UX, developer experience, or follows a monolithic or micro-frontend architecture. For example, if performance is your top priority, choose a lightweight design system that includes the components you need, and use tree-shaking. If you're building a micro-frontend architecture, modular styling solutions like CSS Modules or CSS-in-JS can help maintain encapsulation and prevent style conflicts across independent teams or apps.

• Consistency in Approach: This is often overlooked but incredibly important. In many GitHub projects, I’ve seen inconsistent styling, like mixing Tailwind with MUI or combining CSS-in-JS with utility-first frameworks. This can quickly lead to waste. It’s best to choose a UI library that complements your CSS strategy. If you’re using Tailwind, go for a Tailwind-first design system; if you prefer CSS-in-JS, consider options like MUI or Chakra that align well with that approach.

In summary, the best choice depends on striking a balance between your team's capabilities, your project's goals, and the long-term maintainability of your codebase. There's no one-size-fits-all; what matters most is choosing a consistent, scalable approach that serves both developers and users effectively.