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 !