When building a website, one of the most important elements to focus on for guaranteed success is visual appeal. Flawless art direction—whether simple or unlike anything seen before—is necessary to capture users’ attention. For front-end developers, it is crucial to properly implement the chosen design, and on the internet, this is done through the CSS programming language.
Today, I’m introducing a framework that has revolutionized the way we develop the front end: Tailwind CSS!
What is Tailwind CSS?
As mentioned above, Tailwind CSS is a framework—in other words, a toolbox. It allows developers to code more flexibly and efficiently. Tailwind works by scanning all files that may contain style classes to apply (HTML, JavaScript, etc.) in search of custom classes, then generating the corresponding styles and writing them into a static CSS file.
What you need to understand here is that, unlike traditional CSS where styles are generally written in files external to the HTML, Tailwind CSS lets you write them directly in the HTML files, on the elements themselves! Here is an example:
Instead of doing this:
example.html
example.css
Tailwind lets you achieve the same result by doing this:
And you get this:
How? With Tailwind utility classes that cover the most common CSS properties. Here are a few examples:
- display: flex -> flex
- flex-direction: column -> flex-col
- align-items: center -> items-center
- color: white -> text-white
- position: relative -> relative
- width: 100% -> w-full
For spacing, Tailwind offers predefined values based on a base of 4.
- padding: 4px -> p-1
- padding-top: 8px -> pt-2
- padding-right: 16px -> pr-4
- padding-left: 32px -> pl-8
- padding: 40px 0px -> py-10
- padding: 0px 48px -> px-12
- etc.
However, it is entirely possible to use more precise values by writing them in brackets like this: p-[27px].
The vast majority of CSS classes have their Tailwind equivalent, but traditional CSS can also be used and compiled if you want to use a less common property—just write it in brackets with no spaces: [backface-visibility:visible].
Responsive
Tailwind also greatly simplifies a site’s responsive design by allowing you to use simple, editable breakpoints directly in the HTML.
The default breakpoints are as follows:
- sm: ‘640px’,
- md: ‘768px’,
- lg: ‘1024px’,
- xl: ‘1280px’,
- 2xl: ‘1536px’,
An example of usage could look like this, where you can replace:
With this:
Note that Tailwind CSS follows a “mobile first” approach, which means the base value given will be the one below 640px and each breakpoint will increase—unlike “desktop first” development where the base value is 1920px and you go down with breakpoints.
Customization
If Tailwind’s default variables do not suit a project, it is also possible to create and customize variables using an initial configuration file. You can therefore create new values for colors, typography, spacing, border radius, etc., and associate them with variables that can be reused to simplify the site development process as much as possible.
Practical examples
Here are a few practical examples!
A simple button:
In order, here is what we do: add 20px vertical padding, add 32px horizontal padding, maximum corner rounding, black background, white text, and uppercase letters.
And here is the result:
A list of cards:
Here we set div.container to display grid with three columns and 32px spacing.
We add to each card 20px horizontal padding, 32px vertical padding, a black background with 10% opacity, then above 768px we change the horizontal padding to 32px and the vertical padding to 48px.
For the first <p>, we add a 40px margin-bottom, set a text color, a font size of 42px, and a weight of 700 (i.e., bold), then above 1024px we change the margin-bottom to 48px.
On the <h3>, we set the text to a font size of 32px and a weight of 700 (bold).
Finally, on the last <p>, we set a margin-top of 8px by default and 12px once above 1024px.
And here is the result:
Conclusion
In short, whether you are a client or a developer, Tailwind CSS is a major time- and money-saver that is well worth trying!
If this topic has piqued your curiosity and you would like to see Tailwind CSS’s effectiveness in action, click here to access our quote request form and we’ll chat soon!
