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 Layouts and Splendid Styles (docs for Splendid Styles coming soon…).

How we will use Tailwind

We will use Tailwind for two things:

1. Adjusting simple values on the fly
2. Responsive variants

Adjusting Simple Values

We use Tailwind utilities to modify these properties on the fly:

• 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.

Occassionally, very occasionally, you may also need to use change max-width and max-height values.

Class	Effect
w-*	Sets width
h-*	Sets height
max-w-*	Sets max-width
max-h-*	Sets max-height

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

Class	Effect
w-1	width: 0.25rem
w-2	width: 0.5rem
w-3	width: 0.75rem
w-4	width: 1rem
w-*	And so on…

Margin

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

Class	Effect
m-*	Sets margin on all four sides
mx-*	Sets margin-inline (for the horizontal axis)
my-*	Sets margin-block (for the vertical axis)

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

Class	Effect
mt-*	Sets margin-top
mb-*	Sets margin-bottom
ml-*	Sets margin-left
mr-*	Sets margin-right
ms-*	Sets margin-inline-start
me-*	Sets margin-inline-end

Tailwind also uses spacing values for margin.

Class	Effect
m-1	margin: 0.25rem
m-2	margin: 0.5rem
m-3	margin: 0.75rem
m-4	margin: 1rem
m-*	And so on…

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.

Class	Effect
p-*	Sets padding on all four sides
px-*	Sets padding-inline (for the horizontal axis)
py-*	Sets padding-block (for the vertical axis)
…	And so on…

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:

Class	Effect
border-*	Sets border on all four sides
border-x-*	Sets border-inline on the horizontal axis
border-y-*	Sets border-block on the vertical axis

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

Class	Effect
border-t-*	Sets border-top
border-b-*	Sets border-bottom
border-l-*	Sets border-left
border-r-*	Sets border-right
border-s-*	Sets border-inline-start
border-e-*	Sets border-inline-end

Here’s a significant difference: Tailwind only provides 5 border-width values.

Class	Properties
border-0	border-width: 0px;
border	border-width: 1px;
border-2	border-width: 2px;
border-4	border-width: 4px;
border-8	border-width: 8px;

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.

Class	Effect
rounded	Sets border-radius of all 4 corners
rounded-t	Sets border-radius of the top 2 corners
rounded-b	Sets border-radius of the bottom 2 corners
rounded-l	Sets border-radius of the left 2 corners
rounded-r	Sets border-radius of the right 2 corners
rounded-s	Sets border-radius of the 2 corners at the start of the inline axis
rounded-e	Sets border-radius of the 2 corners at the end of the inline axis

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

Class	Effect
rounded-tl	Sets border-radius of the top left corner
rounded-tr	Sets border-radius of the top right corner
rounded-bl	Sets border-radius of the bottom left corner
rounded-br	Sets border-radius of the bottom right corner
rounded-ss	Sets border-radius of the start-start corner (top-left in ltr)
rounded-se	Sets border-radius of the start-end corner (top-right in ltr)
rounded-es	Sets border-radius of the end-start corner (bottom-left in ltr)
rounded-ee	Sets border-radius of the end-end corner (bottom-right in ltr)

Tailwind has decided to use rather unintuitive values for border-radius as well:

Class	Effect
rounded-none	border-radius: 0px
rounded	border-radius: 0.125rem
rounded-sm	border-radius: 0.25rem
rounded-md	border-radius: 0.375rem
rounded-lg	border-radius: 0.5rem
rounded-*	And so on…

We also made this more intuitive by extending Tailwind’s spacing values to border radius in our layouts preset.

Responsive variants

Tailwind’s responsive variants let you change properties and CSS variables at predefined breakpoints.

Here’s a list of built-in variants:

Variant	Effect
sm	@media (min-width: 640px) { ... }
md	@media (min-width: 768px) { ... }
lg	@media (min-width: 1024px) { ... }
xl	@media (min-width: 1280px) { ... }
2xl	@media (min-width: 1536px) { ... }

We feel that Tailwind’s responsive variants are insufficient since we shouldn’t use device breakpoints, so we’ve added numerious variants — from 50px to 2000px — in our layouts preset.

A note on Typography and Colours

Naturally, we’ve made our own enhancements to Tailwind’s Typography and Color utilities. These fall under Splendid Styles, so we’ll continue that discussion there if you’re interested.