This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Gravy59
TailwindCSS is a prominent CSS framework that has grown in popularity in recent years. It has a wide range of pre-built utility classes that make styling HTML easy. My opinion on Tailwind is mixed, as it seems to provide the same amount of benefits and drawbacks.
Design Constraints
TailwindCSS's design constraints are one of its greatest advantages. It includes a set of precise design principles that maintain a uniform look and feel across all website parts.
Extensibility & Configuration
Tailwind's config file allows you to create any number of CSS properties, and their new JIT arbitrary values are essentially inline css - which in some cases is exactly the issue with Tailwind.
Preflight
Tailwind Preflight is amazing - built on top of modern-normalize, Preflight resets the default inconsistent styles across modern browsers. In addition to modern-normalize, Preflight:
- Allows devs to apply a border just by setting a border width
- Ensures horizontal rules are visible by default
- Removes gaps between table borders by default
- Resets all font sizes, buttons, and other styles on elements to allow the user to rebuild them without any default styles getting in the way
- And much more
I would actually use preflight in a project without Tailwind.
Tailwind is great, but there are a lot of drawbacks.
Lack of Abstraction
Tailwind CSS doesn't abstract away the underlying CSS. Instead, it provides a set of pre-designed utility classes that simply modify the styles of HTML elements. This can sometimes result in massive, bloated class names that are not that better than inline styles.
Repetition
Tailwind isn't as friendly to reusable components compared to something like BEM. Applying styles to a component becomes tedious, and even Tailwind acknowledges this.
<div class="mt-3 flex -space-x-2 overflow-hidden">
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
<img class="inline-block h-12 w-12 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</div>
you’ll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.
Their solutions are flimsy at best. They recommend that you
A) Use a framework, which not all developers want to do, or
B) extract styles with their @apply directive, which do anything about the problem Tailwind was intended to solve.
The first solution works fine from a workflow standpoint, but at compile time you're still left with bloated class names (even if Tailwind purges unused css) that in some cases can balloon file sizes.
Aleksandr Hovhannisyan - Why I Don't Like Tailwind CSS
Conclusion
Tailwind is great for rapid prototyping. It's extensibility makes it trivial to stay conformed to a design system. Preflight is one of the best ideas ever, and more people need to use preflight or modern-normalize to make their lives easier. Unfortunately, Tailwind also suffers from large, sometimes unmaintainable class names that can be extremely repetitive and balloon your HTML file sizes.
Thanks for reading! REMEMBER TO USE MODERN-NORMALIZE IN ALL PROJECTS FROM NOW ON
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Gravy59
Gravy59 | Sciencx (2023-02-01T20:37:11+00:00) Tailwind CSS: A critique. Retrieved from https://www.scien.cx/2023/02/01/tailwind-css-a-critique/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.