![]() Tailwind UI, Tailwind Components and MerakiUI. ![]() There are also plenty of websites that offer designs (often for free) build with Tailwind CSS, e.g. Check out this playlist on Adam Wathan's Youtube channel, to learn how to use Tailwind CSS. Tailwind CSS has a brilliant documentation and great resources to learn. Check out this article by Sarah Dayan for an in-depth comparison. All these things, Tailwind CSS handles with flying colors. Inline styles are frowned upon for good reasons, as they can't handle pseudo-classes like hover and focus styles, they don't handle deeper nesting like selector lists or CSS combinators, and they don't have access to media queries for responsive design, just to name a few. Read more about this topic in this article by the creator of Tailwind CSS, Adam Wathan.Īnother misconception is that Tailwind CSS is just another form of inline styles. Also, this approach frees you from having re-invent sensible class names constantly. As a result, you're actually repeating code - and thus violate the DRY principle (don't repeat yourself). However, if you have ever worked with HTML and CSS, you'll realize that this separation of concerns isn't really possible, as the CSS selectors always have to follow the markup structure. It's all right there in the markup of the component you're working on - easy and understandable.Ī common critique of Tailwind CSS is that it doesn't follow the separation of concerns principle for markup and styling. When joining a new project, one doesn't have to spend weeks to try to understand how the CSS classes have been laid out, before you're brave enough to modify it. Just recently the flexibility got a big boost, as the new JIT (just-in-time) compiler allows using arbitrary values in-line.Īnother great benefit in my opinion is developer on-boarding. At the same time Tailwind CSS provides (almost) all the flexibility of modern CSS. Tailwind CSS, for me, hits a sweet spot of abstraction, as the utility classes provide almost like a design system, that helps to create visually consistent UIs by constraining me to a range of sensible options. If you've worked with Bootstrap, a CSS framework that is still quite popular, you might be familiar with the issue that once you step away slightly from the pre-defined design, you have to start writing your own CSS and that quickly becomes really messy. Personally, I like Tailwind CSS because it makes developing web sites and applications so much easier for me. In the last two years, Tailwind CSS has been the CSS framework with the highest developer satisfaction and it's made a massive jump in usage from 6% in 2019 to 26% in 2020, a staggering 20% increase in just a year (see State of CSS survey). the design adapts to different screen sizes, like desktop, tablet or phone) websites. Tailwind CSS is a utility-first CSS framework, that allows to build modern websites without ever leaving the HTML markup.Ĭheck out their website for a few examples showing how easy it is to create beautiful, modern and responsive (i.e. When it comes to styling websites and web applications, a CSS framework that has gained a lot of traction over the last two years is Tailwind CSS. You can find the code for this tutorial on GitHub. ![]() If you haven't already, check out the first part of this tutorial, where I cover implementing the functionality like search, filter, sorting and pagination with React Table. This is the second part of the React Table Tutorial, where I'll show how to give the table a modern styling with Tailwind CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |