Using Tailwind

Tailwind has two major and opposing sentiments:

1. Tailwind is the best and everyone should ditch CSS for it.
2. Tailwind is 🤢🤮.

Neither sentiment is true — we don’t have to replace style sheets with Tailwind. We also don’t have to completely ditch Tailwind either. Instead, we can use Tailwind and CSS in a synergistic way where their strengths complement each other.

The result of that synergistic exploration is Splendid Styles and Unorthodox Tailwind.

On this page, you’ll find a basic guide on using Tailwind with Splendid Styles.

What we use Tailwind for

In Splendid Layouts, we use Tailwind for two things:

1. Adjusting layouts on the fly
2. Responsive variants

Adjusting layouts on the fly

Tailwind utilities are great for adjusting layouts without additional CSS customization. One example is using vertical with items-* utilities to adjust the alignment of items.

<div class="vertical"> ... </div>
<div class="vertical items-start"> ... </div>
<div class="vertical items-center"> ... </div>
<div class="vertical items-center"> ... </div>

Tailwind also contains utilities that let you adjust the following values easily:

• width
• height
• gap
• margin
• padding
• border
• border-radius

Below is everything you need to know about adjusting these values.

Width and Height

Tailwind uses w to denote width and h to denote height. You can change Tailwind’s width and height values by using the class (w or h) with a spacing value.

Tailwind’s default spacing values are as follows. (Each integer represents 0.25rem):

Margin

Tailwind uses m to denote margins. There are three shorthands for adjusting margin values:

You can also set margin values on one side with the following classes:

Tailwind also uses spacing values for margin.

Padding

Tailwind denotes padding with p. Everything I have mentioned above about margin applies to padding, the only difference is you have to replace m with p.

Border

Tailwind uses the border keyword for border-related operations. Their classes look more complex than m and p because of the keyword difference, but the same rules apply.

Here are shorthands for adjusting border-width:

If you wish to adjust borders on a single side, you can use the following classes:

Here’s a significant difference: Instead of using spacing values, Tailwind’s border utilities creates borders in pixels.

We find this unintuitive, so we fixed this in our layouts preset.

Border radius

Tailwind uses the rounded keyword for border radius. This is more complex compared to the above properties because there more variations.

Here are Tailwind’s border radius shorthands.

If you need to adjust only one radius, you can specify that corner or use their respective logical properties.

Unfortunately, Tailwind has decided to use rather unintuitive values for border-radius:

So we added utilities that use spacing values to adjust the border radius.

Responsive variants

Tailwind’s responsive variants are amazing for creating responsive layouts without additional CSS customization. This can be useful for one-time layouts.

Here’s an example that creates a 1-column layout on mobile and 2-column layout on tablet viewports.

<div class="grid-simple md:[--cols:2]"> ... </div>

By default, Tailwind provides you with the following responsive variants:

We feel that Tailwind’s default responsive variants are insufficient as they box you into device breakpoints. We believe we shouldn’t use device breakpoints, but we should adjust the layout based on when the content requires it, so we included variants from 100px to 2000px with the bp variant.

Each integer here represents a breakpoint at 100px.

The same bp* variant works with container modifiers too. Just use @bp* as the variant instead.

Unorthodox Tailwind

We believe in using Tailwind and CSS in a synergistic manner — leveraging the strengths of both systems — instead of littering your DOM with utility classes. This mini-tailwind guide here scratches the surface of what we wrote in Unorthodox Tailwind.

Give that a try if you’re interested in learning more!