Tailwind (utility-first CSS framework)

Tailwind (utility-first CSS framework)
Tailwind CSS is a utility-first CSS framework. The “utility-first” approach was created to
combat the cons we talked about previously with CSS and Sass. In this methodology, we
use small utility classes to build a component’s style instead of defining our own class
names. It can feel a little like writing inline styling, as your elements will have a string of
utility classes added to them, but the benefit is that you don’t have to write a single line of
your own CSS if you don’t want to.
The pros for using Tailwind are as follows:
• One source of truth: When using CSS or Sass, you must switch between two files:
your markup and your style sheets. Tailwind does away with this concept and
instead allows you to embed your styles directly in your markup.
• Naming conventions: Tailwind removes the need for you to create your own
classes. It has its own classes that are incredibly granular called “utility classes.” You
use these classes to build up your elements’ styles and not worry about creating
unique classes for each component.
Styling in Gatsby 31
• Smaller CSS: Tailwind provides you with a complete set of utility classes
that you rarely need to supplement with your own styles. Your CSS, therefore,
stops increasing; in fact, it gets smaller. When you’re ready to production-build
your application, you can use Tailwind’s built-in purge function to remove
unused classes.
• No side effects: As we are adding styles in our markup and not manipulating the
underlying class names, there are never any unintended side effects elsewhere in
our application.
The cons for using Tailwind are as follows:
• Markup legibility: As your markup contains your style built from utilities, the
class names of elements can become incredibly long. When you add in the fact
that these may need to change on hover or at breakpoints, your line length can
end up very long.
• Learning curve: Utility-first requires you to learn many class names to know what
tools you must build your styles with. This learning can take some time and slow
you down at the beginning, but I believe once you have these under your belt, your
development speed will become much faster.
Tailwind hits a great balance of abstraction and flexibility. It is the newest implementation
on this list and my personal favorite


Stay Connected

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart