Tailwind and the atomic CSS approach – part 3

Tailwind CSS framework covers a large amount of CSS properties and values and it is the most popular among utility-first frameworks. Today we will discuss in large about the classes that are defined for different CSS property-value pairs. I will show you just a few, to make an idea. Let’s get into it!

Fonts

Tailwind implemented only 3 font families:

font-sans
font-serif
font-mono

These 3 font families are defined, but what I find really interesting is the fact that font-sans for example does not cover only the sans-serif family, but it has a large fallback list:

font-sans 
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

If you decide to extend the font family, you have to do it from the config file:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'futura': ['Futura', 'sans-serif']
      }
    }
  }
}

Font size

Ex: text-xs

The sizing is done with t-shirt sizing labels like xs, sm, lg, xl, 2xl,3xl…9xl and between the sm and lg there is a base label that represents the 1rem/1.5 value. Each of these values have a fontSize/lineHeight pair.

Note: Don’t forget that you can also add values dinamically(arbitrary values) with the JIT engine: text-[12em]

Font weight

Ex: font-medium

The values are from 100 till 900 and each of them has a keyword:

thin, extralight, light, normal, medium, semibold, bold, extrabold, black

Font style

Ex: italic or not-italic

The not-italic value is for resetting on a different breakpoint the italic value:

<p class="italic sm:not-italic"></p>

Text classes

The text color, opacity, alignment and other properties are in this category.

Color

Ex: text-yellow-700/75

The text colour predefined classes have a table of predefined colour names accompanied with colour brightness numeric scale that start with 50(the brightest version of that colour), followed by 100…900(the darkest). The names for the colours predefined are: gray, red, yellow, black, white, green, blue, indigo, purple, pink. The /75 represents the text colour opacity. Of course I don’t recommend to use colour names in the class, because if the theme changes, you need to replace all instances of that class in all components where you used it. Instead define your colour class names in the config file and name them primary, secondary etc.

module.exports = {
  theme: {
    colors: {
      primary: '#fcc',
      secondary: '#fdd',

    }
  }
}

Text color opacity

Ex: text-opacity-25

Tailwind has an interesting way of going with number representations, because the numbering is not linear, sometimes some numbers are skipped and the amount of increase changes all of sudden. Take a look:

0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100

Text alignment

Ex: text-right

The values are left, center, right, justify.

Text decoration

This class does not contain the text- prefix and the values are:

underline, line-through, no-underline

Text transform

This class does not contain a text- prefix.

uppercase, lowercase, capitalize, normal-case

Text overflow

truncate, text-ellipsis, text-clip

Tracking(letter spacing)

Ex tracking-tighter

Tracking in typography means letter spacing and the values are in keywords

tighter = -0.05em
tight = -0.25em
normal = 0
wide = 0.025em
wider = 0.05em
widest = 0.1em

Leading(line height)

Ex: leading-3

Leading is also a term from typography and it means the space between adjacent lines.

3 = 0.75rem
4 = 1rem
5 = 1.25rem
6 = 1.5rem
7 = 1.5rem
8 = 2rem
9 = 2.25rem
10 = 2.5rem

Also there is a keyword based naming for relative line heights:

none = 1
tight = 1.25
snug = 1.375
normal 1.5
relaxed 1.625
loose 2

Borders

The border width has only 4 values defined: 0, 2, 4, 8 and adding just the class border will add 1px border to all sides. border-l-2 will add 2px left border and border-x-4 will add horizontal borders(left and right) for the element.

Border radius

Ex: rounded-t

We can target 2 corners at once adding one of the sides t, r, b, l (top [left, right], right [top,bottom], bottom [left, right], left[top, bottom]) or targeting only one side adding tl, tr, bl, br(top-left, top-right, bottom-left, bottom-right). The amount keywords for radius of the border are: none, full, sm, md, lg, xl, 2xxl, 3xl where full is a circle.

Border style

Ex: border-solid

Values are: none, solid, dashed, dotted, double

Gradient backgrounds

Ex: from-red-600 to-purple-400 bg-gradient-to-r

As you can see this is a composition of multiple classes to have a gradient on an element. In the example we have a gradient background that goes from left to right. It starts with a red and goes to purple.

Box shadow

Ex: shadow-md

Values are: none, inner, sm, md, lg, xl, 2xl

The inner class definition looks like this: box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

Padding and margin

Ex: pb-96

The code above exemplifies the representation of padding-bottom: 24rem

The values are: 0, 0.5, 1, 1.5….96

Ex: mr-4

Above the class for margin-right: 1rem is shown and the 4 numeric value represents usually the 1rem measure. Margins can have also negative values:

<div class="-mb-1.5"></div>

Width and height

Ex: w-3.5 or h-3.5

The values are the same pattern as in the case of padding and margin:

0 0.5 1 1.5 2 2.5 3 3.5 4(1 rem) 5 6 7 8 9 10 11 12 13 14 16 20 24 28 32 36 40 44 48 52 56 60 64 72 80 96

We can use also fraction values:

1/2 1/3 2/3 1/4 2/4 3/4 1/5 2/5 3/5 4/5 1/6 2/6 3/6 4/6 5/6 1/12 2/12 3/12 4/12 5/12

6/12 7/12 8/12 9/12 10/12 11/12

Also you can use keywords like auto, px, full(100%), screen(100vw) min and max

The flex order property

Ex: order-5

This class name has 12 numeric values(just like the Bootstrap 12 grid system) and some additional keywords:

first, last, none

The first is equal with writing -9999 and the last is equal with writing 9999, none is 0.

Transition

Ex: transition-opacity

Values: none, all, colors, opacity, shadow, transform

Animations

Ex: animate-spin

These are predefined animations with keyframes and if you want your own custom animation you have to configure it in the config file.

Values: none, spin, ping, pulse, bounce

I could go on till Christmas with presenting you how Tailwind defined CSS property-value pairs in it’s classes but the best would be, when you need something just search on their website in the syntax search field.

Conclusion:

The mission of this article is to show you the way of working with Tailwind classes not to reference all of them, because you can have that in their official website. Tailwind has it’s own way of representing property values, by inventing keywords for different numeric values, keywords like tight, relaxed or t-shirt size labels like xs, lg, 2xl or by using a numeric value that represents a certain length with usually a rem unit, but sometimes also em unit. The pattern followed in the values differ from one CSS property abstraction to the other. Width, height, padding and margin uses values from 0 till 96 but width also uses fractions. The flex order property uses the 12 column grid, as if there would be 12 columns and you reorder the columns between those 12.

Renaming certain CSS property names is also a used method in Tailwind, for example divide is actually a border between elements, ring is box shadow, leading is borrowed from typography and it means line height and tracking means letter spacing. There is a certain amount of learning to be covered here, but you can always use the search bar from their official website and refresh your memory each time you don’t remember the syntax. Enjoy !