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.
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.
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.js file 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.
发布评论
评论（3）
在您的情况下，我不建议您。如果您手头的设计系统，则不应优选尾翼。当您尝试有条件地应用尾风类时，您的代码会变得凌乱。您可以通过使用Selector实用程序函数来确定您使用哪个类，可以解决此问题。我更喜欢SCSS或UI框架之类的东西。
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.
根据我的经验，tail风对于快速开发 - 当优先级是速度而不是极端可定制性时。还有一个学习曲线可以精通用尾风（副本抛弃现有组件之外）创建好页面。
对于“仪表板构建器”空间中的大规模应用程序，我认为会有很多定制设计的组件，因此我个人不会使用尾风。
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.
仅提供对这些答案的一些反点击点，即不要使用tailwind：
正确设置（例如，使用webpack/postcss，而不仅仅是从cdn中撤入.css文件），您实际上可以控制很多。
您可以使用
tailwind.config.js文件来配置CSS的几乎所有方面 - 设置新颜色，间距，启用/禁用的悬停/焦点效果等。一旦正确设置了此文件对于您的设计系统，很容易创建一个一致的应用程序。默认内置的树木摇动 - 运行生产构建时，您的捆绑器将扫描您的代码并剥离任何未使用的类，从而产生最小的文件大小。
它带有一堆 function> functions，mixins and hersins 您可以在哪里创建创建的地方如果需要的话，您自己的课程 - 同时保持默认的尾风类一致。
另一个很大的是，任何从事该项目的未来开发人员都不会。必须学习您的CSS系统，他们可以阅读尾风良好的文档，并知道如何快速使用它 - 如果他们还没有。
它已经经过全球数千名开发人员进行了测试，因此，如果您构建自己的系统，它涵盖了大量的边缘和浏览器怪癖。许多开发人员认为他们可以构建一个更好的系统，但并非总是如此。
这并不是说这是您的项目 - 只有您才能权衡您的样式是否值得损失使用tailwind节省的时间 - 但是很多经常抛出尾风的负面因素（文件大小） /Control/“需要很多类”）如果正确设置的设置并不是真正的问题。
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.