I wanted to develop a large-scale web application using Tailwind CSS.
Is Tailwind CSS suitable for large-scale web applications? & Tailwind CSS worth investing time and money, or should I go with Vanilla CSS or another UI framework?
In my case, I have a design system and extensive database records, and I will need to use Animations, Drag & Drop ..etc. to build my SaaS product (Dashboard Builder).
I am looking forward to your guidance.
CodePudding user response：
I wouldn't recommend in your case. TailwindCSS should not be preferred if you have a design system at hand. Your code will get messy when you try to apply tailwind classes conditionally. You can work around this by using selector utility functions to decide which classes you'll use. I would prefer something like SCSS or a UI framework.
CodePudding user response：
In my experience, Tailwind is useful for rapid development - for when the priority is speed rather than extreme customizability. There is also rather a learning curve to be proficient at creating good pages with tailwind (outside of copy-pasting existing components).
For a large-scale application in the space of a "dashboard builder", I'd think that there'll be lots of custom-designed components, so I personally wouldn't use Tailwind.
CodePudding user response：
Just offering some counter points to these answers saying don't use Tailwind:
Setup properly (eg. using webpack/postCSS, not just pulling in a .css file from a CDN), you actually have a lot of control.
You can use a
tailwind.config.jsfile to configure almost all aspects of the CSS - setup new colours, spacing, enable/disabled hover/focus effects etc. Once this file is setup correctly for your design system it is very easy to create a consistent application.Tree shaking is built in by default - on running a production build your bundler will scan your code and strip out any classes which aren't used, resulting in the smallest possible file size.
It comes with a bunch of functions, mixins and helpers where you can create your own classes if need be - while keeping it consistent with default tailwind classes.
Another big one is that any future developers working on the project won't. have to learn your CSS system, they can read Tailwinds well-written documentation and know how to use it fairly quickly - if they don't already.
It's been tested by thousands of developers worldwide, so it covers a huge amount of edge-cases and browsers quirks you might miss if you're building your own system. A lot of developers think they can build a better system but that's not always the case.
This isn't to say it's right for your project - there's only really you who can weigh up whether having absolute control of your styles is worth losing the time saved using Tailwind - but a lot of the regularly thrown out negatives of Tailwind (file size/control/'need lots of classes') are not really issues if setup correctly.