Using a CSS framework brings many benefits, such as increased productivity and better code maintainability. In this article we introduce Tailwind CSS, the fully customisable framework. You will discover its advantages and how to use it.
A creator with a taste for new projects
Adam Wathan is passionate about web development and is behind a number of projects, including Laravel Valet, Jigsaw and Tailwind CSS.
The idea for the Tailwind CSS framework came while working on a project called KiteTail in 2017 — a framework that now takes up all of that time.
What is Tailwind CSS?
Tailwind CSS is a framework that lets developers customise the design of their application or website completely and easily. With this CSS framework, you can build an interface design inside the HTML file itself. This way of coding does not conflict with the practices recommended by the W3C, such as separating HTML from CSS stylesheets. To use Tailwind, you take the CSS classes predefined by the framework and call them in an HTML file, like this:class="text-3xl font-bold text-cyan-500"
Looking at this example, you might think Tailwind CSS follows the same coding methodology as Bootstrap. Yet in terms of file size, Tailwind CSS is heavier than Bootstrap — so why use it?
How simple the CSS framework is to use
Single-purpose CSS classes
Tailwind CSS stands out in the way it uses CSS classes. The framework only uses single-purpose classes — in other words, classes that do one thing only. The text-gray-500 class, for instance, does nothing but turn the text it is applied to grey.
To understand the difference with Bootstrap, let us create a blue button. Without hesitation we would use the btn btn-primary property provided by Bootstrap. But imagine the blue is not quite the shade we wanted: we would then have to create a CSS file to override the colour. Tailwind CSS avoids that extra step precisely because, remember, one class equals one purpose. To create the blue button, you would use the following classes:w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700
At first glance it is certainly longer to write! However, for elements used often, Tailwind CSS lets you create your own classes.
An @apply rule for creating your own CSS classes
To avoid writing out this syntax repeatedly on elements with identical designs, Tailwind CSS lets you create your own CSS classes. Directly in the CSS file, you can give a class a name and list all the properties to use thanks to the @apply directive. Going back to the blue button example, you end up with a CSS class that looks like this:.btn-blue { @apply w-1/6 px-0 py-2 flex justify-center text-white border rounded bg-blue-700; }
Note that the CSS framework accepts a mix of its own syntax and standard CSS:.btn-blue { background-color: blue; @apply w-1/6 px-0 py-2 flex justify-center text-white border rounded; }
A quick summary
The drawbacks of using Tailwind CSS…
The framework’s syntax requires a good knowledge of the various class names. What is more, working with single-purpose classes can prove very long to write depending on how many properties you need. For that reason, Tailwind CSS is not recommended for every website.
…and the advantages the CSS framework brings
Thanks to Tailwind, there is no more racking your brains to find suitable class names, which can be a real time-saver. And even though the framework is fairly heavy (477.6 kB), that weight can be reduced, because Tailwind CSS automatically removes all the CSS styles that were not used to build the site’s design.
Installing Tailwind CSS
Via npm. Installing the framework via npm is straightforward. Simply run the command:npm install -D tailwindcss@latest
Via CDN. For installation via a CDN, use the link tag below — bear in mind that several features are unavailable with this method:href="<https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>" rel="stylesheet"
