Tailwind: Introduction to the Framework, Should I Implement It in My Tech Stack?

Introduction

Tailwind CSS is one of the most popular CSS frameworks recently. Its aim is to simplify and speed up the development of websites and applications using predefined utility classes. This article will introduce you to this framework and explain some of the principles it applies.

Utility-first

Tailwind CSS is considered a utility-first framework, which means it focuses on providing simple and straightforward utility classes for quick and efficient styling. Instead of constructing custom classes for each element on a page, with Tailwind, you can easily combine existing classes to achieve the desired appearance. This approach allows developers to work faster and reduces the likelihood of duplicate code.

Examples

Let's say we want to style a button with rounded corners, white text, and a green background. In traditional CSS, we would create a class like .button and assign CSS styles to it, for example:

<button class="button">Order</button>
<style>
.button {
  background:green;
  color:white;
  border-radius : 0.25rem;
}
</style>

And how would the same example look rewritten in TailwindCSS? Let's take a look.

<button class="bg-green text-white rounded">Order</button>

As you can see, we use CSS classes similar to writing inline styles. This means we don't have to switch context between HTML and CSS, in our minds; instead, we stay within HTML

Configuration

The tailwind.config.js file is used for configuration. In it, you can specify the colors you want to use, define breakpoints for your media queries, create animations, gradients, shadows, and much more. The definitions in the configuration file prepare the classes for use in your project.

A great advantage of this framework is that the resulting minified CSS contains only the classes that are actually used in the project. Before the project is built, it goes through a simple regex search for classes, and the found values are used as the set of names for which CSS will be generated.

Units

In Tailwind, units are based on rem, with 1 tawilwind jednotka je 1/4 rem which is 4px by default.

1 rem = 16px, 1/4 rem = 4px.

See the table below:

Width, Height, Spacing

Now that we know the units, let's demonstrate their simple usage. Width has the prefix w-*, and height has the prefix h-*. So, if we want a square with a width of 40px and height of 40px, we write it like this: w-10 h-10.

Margin and padding are very similar, but while padding has the prefix p-*, margin has the prefix m-*. We can also specify which specific margin/padding we want. For example, padding top is written with the prefix pt-*, padding left and right with the prefix px-*.

The table below provides a better explanation:

In addition, the authors of Tailwind have written really good documentation, where you can find everything you need.

Colors

Colors can be used in text, backgrounds, gradients, borders, etc. Colors are configuration driven, then all colors are available in all classes that are related to the color. For example, if we define a primary color in tailwind.config.js:

colors: {
    primary: {
        DEFAULT: '#AA1BBD',
    },
}

We can then use it, for example, in text colouring

<h1 class="text-primary">Heading</h1>

or in the background colour of the div

<div class="bg-primary"></div>

Or maybe as a border color

<div class="border border-primary"></div>

And so on.

Responsiveness

Now you're wondering how to write responsive styles in such a utility-first framework and maybe the idea of bootstrap and its classes col-sm-*, col-md-*, col-lg-* etc... comes to mind.

TailwindCSS went much further in this and handles responsiveness by prefixing with a colon (sm:, md:, lg:), if we want to hide the button on mobile and leave it on desktop the notation would look like this:

<button class="hidden lg:inline-block">Button</button>

The more astute of you will notice that this is a mobile-first solution, where the non-prefix values are applied from the bottom and we use the prefix to change the properties for a higher view.

For reference, the breakpoint table for the default tailwind settings:

If you need, it is not a problem to add new media queries simply in the configuration, for example as follows:

module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
}

Components

It often happens that we repeat certain styles - for example buttons, headings, lists, inputs. To avoid repeating ourselves (DRY) we use components, which is nothing more than defining a new class as a combination of Tailwind classes.

To give you an example, here's how:

@layer components {
  .btn-primary {
    @apply py-4 lg:py-5 px-4 px-6 lg:px-10 2xl:px-16 text-lg md:text-xl border border-primary text-primary bg-transparent;
  }
}

This is how we have created the look for the button, but we are using Tailwind classes so we will be overwriting the defined colors, sizes, etc. The authors of the framework recommend to create components with discretion, because it should not go into writing classic CSS. Components should only be there to simplify repetitive properties.

Reactions to new frameworks

Tailwind is a great tool, especially where we are encapsulating HTML code in components. I'm thinking of modern JS frameworks like React, Vue, Angular, Svelte. When writing such components we can use stylesheets straight away (faster creation, saves our head) and we don't have to worry so much that the list of classes is long and less fancy than, for example, the classic BEM method, because we then use the component as a single tag with no classes hiding inside.

I'm thinking of the following Vue component button:

<template>
  <button 
    class="py-4 lg:py-5 px-6 lg:px-10 2xl:px-16 text-lg md:text-xl border border-primary text-primary bg-transparent"
    >
    <slot />
  </button>
</template>

Use in the project:

<Button>Button</Button>

At the same time, the classes can be inserted as a computed variable and you can easily style the button according to the input props.

<template>
  <button class="py-4 lg:py-5 px-4 lg:px-10 2xl:px-16 text-lg md:text-xl" :class="buttonClasses">
    <slot />
  </button>
</template>
<script>
export default {
  props:['variant'],
  computed: {
    buttonClasses(){
      switch(this.variant){
        /* Main colour styles/variants */
        case 'primary':
        return 'border border-primary text-primary bg-transparent'

        /* Secondary colour styles/variants */
        case 'secondary':
        return 'border border-secondary text-secondary bg-transparent'
      }
    }
  }
}
</script>

Conclusion

Do you like this style of writing code? If so, you should study the tailwind documentation and possibly incorporate it into your technology arsenal. I think it's definitely a revolutionary tool and worth getting familiar with.

Interested in the article and have a question? Feel free to get in touch, I'd be happy to clarify or advise anything on this topic.

Useful links

• Spacing in TailwindCSS
• Explanation of tailwind.config.js
• Trend in TailwindCSS usage
• Plugin for VS Code