Using Tailwind to fill in the gaps in your team's CSS knowledge

The importance of understanding Tailwind under the hood

Although Tailwind is generally easy to use, developers can encounter issues if they don't pay attention to how the Tailwind classes work under the hood. After all, all Tailwind classes are implemented by the library using plain CSS. When developers don't understand how the Tailwind classes actually work, they may create style issues that are visible to the end user or write unnecessarily complex sequences of class names.

To combat this problem, it's important for developers to have a solid foundation in plain CSS before starting with Tailwind. Additionally, when using more complex Tailwind classes, developers should look at underlying CSS to gain a more complete understanding of it. There are several tools that you can use to do this:

• The Chrome DevTools
• The Tailwind CSS IntelliSense VS Code extension
• The Tailwind CSS Playground

Looking “under the hood” at the raw CSS has two benefits:

• It helps developers understand Tailwind better, so they can use Tailwind classes more effectively.
• It teaches developers the inherently tricky parts of CSS, furthering their understanding of web fundamentals that matter regardless of whether you're using Tailwind.

Examples of how Tailwind simplifies styling

Tailwind generally provides a higher-level and more friendly syntax for styling your app than plain CSS. This allows developers who aren't CSS experts to build out good-looking styles quickly. In this section, we'll go over several examples that illustrate this. For each Tailwind class we discuss here, we'll explain how the Tailwind class is either simpler or more powerful than the CSS you'd be likely to write by hand.

Predefined color palettes, spacings, shadows, etc.: When using plain CSS, it takes a lot of effort to ensure consistency across the application. Tailwind is similar to a design system in that it restricts the values you can use for most CSS properties. Being restricted to a subset of colors, spacings, etc. both speeds up development and improves visual consistency. However, Tailwind allows you to remain flexible by allowing you to use arbitrary values when strictly necessary. For example, m-[7px] would set a margin of exactly 7 pixels.

Spacing classes like mx-..., px-..., inset-x-...: Instead of having to set two properties, you can set both at once.

Grid Template Columns (grid-cols-...) : minmax(0, 1fr) guarantees that all columns have equal width. When handwriting CSS, it's more common to use repeat(n, 1fr), which might produce a bug in which the width of the column is defined by the content.

Truncate (truncate) : It has traditionally been tedious to truncate text using an ellipsis using CSS, since it requires setting three CSS properties. But with Tailwind, it just takes a single utility class!

Font : The Tailwind font classes, such as font-sans and font-sm, take care of the intricacies proper typesetting. The font-family classes use cross-platform font stacks so that your app has a consistent appearance across different operating systems, and the font-size classes automatically set an appropriate line-height.

Line Clamp (line-clamp-...) : The line clamp classes use some fancy CSS to limit a paragraph to a certain number of lines. This is significantly more difficult to achieve using plain CSS.

Gradients (bg-gradient-...) : These classes allow building gradients with a simplified syntax.

Ring (ring-...) : The ring classes allow you to apply a custom “glow” around elements. This can be useful to highlight focused elements.

Transitions (transition-...) : These simple classes make it much easier to apply visually-pleasing transitions to your elements.

Animation (animate-...) : Animation classes like animate-spin enable you to apply common animations without having to write the keyframes yourself. This significantly reduces the number of lines of code required.

Container queries plugin : This official plugin brings support for container queries , a responsive CSS feature that was added to the language very recently.

Features like these are what makes writing Tailwind much more pleasant than writing plain CSS, even on projects that are small enough that the scalability issues of CSS aren't causing problems.

Common Tailwind CSS pitfalls

While Tailwind generally simplifies styling your app, there are a few pitfalls that you can hit if you don't have a solid understanding of plain CSS. Here are two of the more common ones:

The order of Tailwind classes doesn't matter: For example, if you write px-2 px-4 or px-4 px-2, px-4 will always win, because it's placed further down in the CSS generated by Tailwind. This can make it unreliable to pass a className prop to a component to customize it's style. The tailwind-merge plugin can help alleviate this problem, though only if the full set of class names is known at compile-time.

It's possible to use classes that don't work together: For example, if you apply both the block and gap-2 classes to the same element, you'll get an element with display: block and gap: 0.5rem;. The gap property only works on elements with display: flex or display: grid, so you may be confused why the gap doesn't take effect if you don't understand the behavior of the underlying CSS.

If your team likes Tailwind but is having trouble understanding why certain combinations of Tailwind classes don't produce the desired result, it's time to look at the underlying CSS! Usually, the source of the issue will become clear if you think in terms of raw CSS.

Summary

Tailwind CSS paves over some, but not all, of the difficulties of styling your app with CSS. The higher-level syntax provided by Tailwind enables us to work more efficiently, but we still need to understand the underlying CSS to get our Tailwind styles to work correctly in all cases. We highly recommend Tailwind to professional teams looking to up their styling game. That said, newer developers would be better off starting with plain CSS so they can gain an in-depth understanding of web fundamentals.