Getting started with Tailwind CSS
A few months ago I wrote this article about Tailwind CSS and why I’d prefer it over Bootstrap. Since then, I’ve received quite a few questions about it, so I thought let’s create an in-depth guide on how to get started.
Content
- What is Tailwind
- How to install Tailwind
- Configuring Tailwind
a. Breakpoints
b. Colors
c. Spacing
d. Variants - Improving your Tailwind workflow
- Frequently Asked Questions
What is Tailwind
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
That’s right, the text above is copied straight from Tailwind’s website, but it describes exactly what Tailwind is. Unlike frameworks like Bootstrap or Bulma, Tailwind doesn’t come with any predefined styles or layouts. But isn’t it much easier to get started with a pre-styled framework? Well, at some point, it absolutely is, and with the newest Bootstrap version (for example), it’s also much easier to customize these out-of-the-box styles.
With Tailwind, however, you get full control of everything. Every single feature of Tailwind is customizable. When you’re just starting as a web developer, this might feel a little overwhelming. Though, when you start getting more and more familiar with web design and need the ability to be in control of every single styling property, you now no longer need to overwrite any prewritten classes. For example, when you need to update a single color, the only thing you need to do is to make a small change to your Tailwind config file. After all the assets have been built, the color will be changed throughout your whole project. No more searching through all of your CSS files to replace this one color.
How to install Tailwind
On Tailwind’s website, you can find a very extended and easy-to-follow step-by-step guide on how to install Tailwind in combination with several build tools. I can go ahead and copy/paste all of the steps over here, but I’d recommend you read the documentation yourself, as the specific steps depend on what other frameworks and tools you are using for your project.
https://tailwindcss.com/docs/installation
At one point during the installation, you’ll have to generate the Tailwind Configuration File. However, if you’re not yet too familiar with all the endless possibilities you have with this file, I’d suggest you run npx tailwindcss init --full. With the--full flag, Tailwind will add a whole bunch of predefined rules to your config file. This might seem very overwhelming at first, but trust me, working with this default set of rules will make it a lot easier when you’re just getting started.
Configuring Tailwind
The configuration system is probably what I like most about Tailwind. Where you could have also defined styling variables in your main CSS file by yourself, Tailwind does this automatically for you. The Tailwind Framework was made in such a way that every little thing can be changed through either making a small change in the config file, or by installing a (third-party) plugin. In this section, I’ll briefly go over, in my eyes, the most used features of the configuration system. Below every feature, I’ll leave a link to the original Tailwind documentations, which often provided even more detailed information.
Breakpoints
Just like every other CSS framework, Tailwind offers the possibility to change the style of your website on different screen sizes. When you’re using the default Tailwind configuration file, there will be 4 default breakpoints:
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px'
}If you want to add, for example, a fifth breakpoint, you can simply add a new property to the screens object and it can immediately be used throughout your whole project. Or you can even change the default breakpoint names to whatever you like (e.g. phone, tablet, laptop & desktop)
In contrast to for example Bootstrap, you can use these breakpoints for every single styling property you defined in your config file. No matter if you want to change a color or a margin, Tailwind makes this all possible by simply adding the specific breakpoint as a prefix to whatever class like. For example, let’s consider we want a different background color on smaller devices, then we just add the following 2 classes: bg-color-red-500 & md:bg-color-white. Note how I added md: in front of the original bg-color-white class. And again, this works for almost every single Tailwind generate class there is.
Colors
The out-of-the-box configuration comes with a few predefined colors, which you, of course, can modify or even remove. These colors will by default come in 9 different shades, from 100 to 900, with 500 being the original color. To use, for example, the color red as a background color, you just have to add the bg-red-500 class to your HTML element. This also works for the text color (text-red-500) and the border color (border-red-500). Colors without any different shades, like black and white, can be used like text-white and border-black, and to use different shades of the color, you have to replace 500 by whatever shade you’d like to use.
To add a custom color to your project, you only have to add a new nested object to the colors object in your configuration file. This Tailwind Color Shaded tool can help you easily generate the different shades of your color, so you can add them to your theme. In combination with different variants, which we will cover further on, these shades make it very easy to create a professional-looking UI without much hassle.
Spacing
Whitespace and spacing are very important in modern UI/UX design. To keep a website clear and easy-to-use, you need to add spacing between elements or make elements larger (or smaller) so the user can easily distinguish the differences. By default, Tailwind adds the following, predefined spacing scale to your theme:
spacing: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem'
},This spacing scale can be used for padding and margin classes, but also for (max- & min-)width, (max- & min-)height, etc. The only thing that can not be sized with this scale is the font size, as this property has got its own scale. To use the scale for a top-margin for example, you add the mt-8 class to the desired element. As said before, you can also use this for a full padding (p-4) or a minimal height (min-h-24 ).
Variants
This might be one of my favorite features of Tailwind: variants. This feature gives you the possibility to change the style when, for example, the user hovers over or focusses on an element. There are 12 different variants supported out-of-the-box:
'responsive''group-hover''focus-within''first''last''odd''even''hover''focus''active''visited''disabled'
However, all these variants will not be generated by default, as this will increase your CSS filesize a lot. By default, most classes will have different responsive variants, and a few will have hover or focus pseudo-class variants. If you want to use any of the other variants, you’ll have to add the desired variant to the nested array in the variants object that you can find in the Tailwind configuration file.
For example, let’s say we want to double the height of every odd table row. In your tailwind.config.js file, you’ll find the following line: height: [‘responsive’],. As you can see, we only have responsive variants for the height classes. To reach our goal, we add 'odd' to the array. After the asset build has been completed, we can use the odd:height-24 class, to give every odd tr a height of 6rem (as defined in our spacing object).
Improving your Tailwind workflow
As you’re working with Tailwind, you’ll often probably find yourself adding the same set of classes to for example buttons over and over again. Luckily, you can use the custom @apply directive to bundle a group of Tailwind classes into a single class. Check out this example:
.table-cell {
@apply border;
@apply px-4;
@apply py-2;
}Or in a shorter way:
.table-cell {
@apply border px-4 py-2;
}When you now add the table-cell class to any of your elements, these elements will all have the properties of the border, px-4 and py-2 classes. Of course, in this case, there are only 3 different classes, but imagine you need to add over 20 classes to a style a button.
One thing to mind though, is that you can’t directly use variants in your main class. To create a variant for your class you’ll have to manually create a pseudo-class and add the different styles in there. For example, when you want to create a hover pseudo-class, you’ll have to do it like this:
.table-cell {
@apply bg-gray-100 border px-4 py-2;
}.table-cell {
@apply bg-gray-300;
}
