Most often components encapsulate HTML markup and any Javascript functionality in addition to CSS. Whether working with traditional server-rendered applications or more Javascript heavy ones, duplication is best avoided by creating reusable components. The skeptic will ask “What about reusability?” This leads us to what Tailwind is particularly good at: delivering projects for the modern web. Colors aren’t just consistent on buttons, they’re consistent everywhere. Spacing isn’t just consistent on an element basis, it’s consistent everywhere. You can’t pick any size, but use classes are configured according to the design system or constraints you have in place. While on the surface this may look like inline styles, it’s anything but. This approach supercharges the UI development workflow – especially when it comes to fine tuning While developing you can “design in the browser” with immediate feedback and without the need to compile anything. The Tailwind skeptic asks “Why would I look at the CSS source?” to which I ask “Well, why are you looking at the HTML source?” There’s a big advantage to the Tailwind approach. If you look at the minified CSS source in the browser it will look “uglier” than the Tailwind markup in the HTML source. But without it you’re not writing less, you’re writing the code elsewhere and hiding it from the markup. So yes, with Tailwind, HTML markup is verbose. Pushback: Verbose markup that feels like inline styling Some developers against using Tailwind argue it’s a more verbose markup that feels like inline styling, isn’t reusable, and lacks common pre-designed components to start with. Why do some developers hesitate to use Tailwind? You can customize it by altering its configuration, allowing you to make a customized (and portable) design system that can be moved from project to project. It offers first-class support for responsive design, modern CSS features like Flexbox and CSS Grid, transitions, and accessibility helpers and it’s easy to extend. On most projects, you can get away with writing very little custom CSS. Tailwind also doesn’t assume which browsers you’ll support on your project. It isn’t opinionated in any way, and comes with a common-sense preset config that’s easy to make yours. Tailwind does a great job not getting in your way, behaves predictably, compiles to a small size in production, and has clear documentation. It’s extremely efficient for developing custom designs and unique visual identities. You can think of these traditional frameworks as templating frameworks. The same is true for similar libraries such as Foundation, Bulma, and Skeleton. While it offers customization options, making Bootstrap not look like Bootstrap is quite a task, as is maintaining your customization. It’s an opinionated, pre designed CSS library. You use them alongside the typical Bootstrap classes like btn or card, but the utility aspect is secondary in Bootstrap. For example, Bootstrap includes utility helpers that enable you to write mx-auto or mx-5 (and so on) to control spacing in a more granular way. Most CSS frameworks offer a set of utility classes to customize components, especially when it comes to spacing. How it’s different from other CSS frameworks This is what makes Tailwind designs look “clean.” Spacing, font sizes, colors, and other design elements are consistent because they are constrained. Tailwind CSS class names are design constraints that don't represent a particular component name or identity. Implementing a company’s brand is easy with Tailwind. It follows the path of projects like Beard CSS and Tachyons CSS, and brings more focus to the developer experience and delivering designs for the web efficiently. Tailwind is a utility-first CSS framework. By Belisar Hoxholli Tailwind delivers branded, polished UI with less development time
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |