Tailwind CSS: what is it, and how does it work?

Emma.Axelsson  

Tailwind CSS “is a utility-first CSS framework used for rapidly building custom user interfaces“.To break this down further, this means that Tailwind CSS provides a catalog of CSS classes to help style an website or application. Each of these classes have their own specific use, or in other words, style that is applied when used in our HTML.

What is utility-first CSS?

In traditional CSS, we target elements through selectors such as tag name, class, or id to name just a few. Then we add the rules for the properties we want to apply, like adding a background colour, padding, font size and so on.

h1 {
    font-size: 16px;
    font-family: sans-serif;
    text-align: center;
    padding: 30px 0;
    background-color: #5d22ab;
    color: #FFF;
  }

In utility first CSS, however, each class is a low-level CSS composition. Instead of creating a class that applies a number of different rules, each class contains a specific rule. Note that the below code block does not show exact Tailwind CSS examples, but aim to provide a visual representation of how these classes might look:

.bg-purple {
    background-color: #5d22ab;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #FFF;
}

With Tailwind CSS, we use a number of these classes to build up the styles we want on the element. To apply a purple background, and to make the text white and centered, we add those classes straight into our HTML.

This means that our HTML might end up looking something like this:

Source code from tailwindcss.com

Why would we want to use this?

At first glance, this may look a little messy for those of us who are used to writing clean and semantic HTML with our styling separated from the HTML through one or more linked CSS files. However, there are a few advantages to using Tailwind CSS’s method of inserting utility classes directly into the HTML to bear in mind.

Unlike some other CSS frameworks, such as Bootstrap, where we take their code and potentially edit it by adding our own CSS to overwrite their styles, Tailwind CSS lets us do that editing and customisation from the very start. Some critiques of CSS frameworks like Bootstrap are that sites that use them often end up looking similar, due to to the specific styles they apply, and that it can be troublesome to add CSS rules that overwrite them – therefore somewhat negating the point in using the framework in the first place. With Tailwind CSS you could say it forces us to build up these styles ourselves – we have to build up the styles we want from the very beginning, because the classes are so specific so as to only apply a single ‘style’.

You also don’t have to make up your own class names, and therefore might avoid falling into the trap of making silly and/or abstract class names (larger-div, bigger-red-button, and so on). The class name in Tailwind CSS indicates the style applied, rather than the function or implied context of that element.

It could also be considered more scalable, as you might avoid adding to your CSS each time you add a new feature. With Tailwind CSS, you’re essentially re-using the same utilities over and over. Though you install the entire library of possible style classes with Tailwind CSS, there is a process called ‘purging‘ when you are optimising for production that removes these unused classes.

Finally, there might be less chance of breaking things when making changes – if you want to change the final red button out of four buttons to a purple, you apply that change only to that element you want to change, and leave the rest as they are. This might be particularly helpful when working in larger teams, as it can be reassuring to know that your changes won’t necessarily impact someone else’s work!

How is that different from using inline styles?

They may look similar on the surface, but Tailwind CSS offers styling options that inline styles simply can’t achieve. Tailwind CSS lets you use pseudo elements like <hover: >, and <focus: >. It also supports media queries, by letting you specify alternative attributes based on ‘breakpoint sizes’.

How does Tailwind CSS work?

First, we have to install it. This can be done by simply inserting a CDN link that’s available from the Tailwind CSS documentation into the header of our HTML, or by installing it into your project via npm or yarn (your package manager). Note that the CDN link has some restrictions on things like customisation, as you won’t have access to the full config file that the full installation has.

The below code block shows a simple HTML document, with the Tailwind CDN insert inside the doument head. There is no other stylesheet linked here – we’ll be adding all of our styling directly into our HTML.

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS example: a button</title>
    <!-- link to Tailwind CSS CDN insert -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1>Let's add some Tailwind CSS!</h1>
</body>
</html>

When we view this in the browser, there isn’t much going on – but note that the defaults for Firefox have been removed. This is because Tailwind CSS uses its own reset, called Preflight.

Screenshot of our HTML document in the browser, showing 'Let's add some Tailwind CSS' in black text against a white background
Our result in the browser.

To style the h1 in our document, we’ll add some classes, and then take a look to see what’s happening in the browser.

<body>
    <h1 class="bg-purple-800 py-4 text-center text-white">Let's add some Tailwind CSS!</h1>
</body>
A screenshot of our HTML and Tailwind CSS in the browser, showing that our text has now turned white and is centered, against a purple background.
The results from adding our Tailwind CSS.

To break down what we’ve added:

  • bg-purple-800 adds a background colour of purple-800. The 800 stands for the density of the colour, relating to the default colour palette (more on that later).
  • py-4 adds padding across the y axis. 4 in this instance translates to 1rem.
  • text-center aligns our text to the center of the page.
  • text-white changes the text color to white.

What about repetition?

The above example is all well and good when seen in isolation, but as we build up our site, we will likely be repeating certain styles over and over again, perhaps across multiple pages. We might start to have concerns over the maintenance of our code, if we’re copying and pasting bits of code again and again to re-create styles in multiple places. This may also prove particularly frustrating if we need to come back and make some changes to our styling across all the pages we’ve applied it to, because there is no single instance of its source!

Tailwind CSS has two main solutions for this – you can either extract these bits of styling as template partials or Javascript components, or use the @apply feature. Note that you cannot use the CDN link for either of these, as you will need to make and access the config files that the full installation via npm/yarn provides.

The above screenshot from the Tailwind CSS documentation shows the extraction of components using Vue, the JavaScript framework. Note how this can then be used as a way to insert content into our HTML dynamically, allowing us to reuse the same utility classes without having to repeat the same HTML structure and classes multiple times in our file. Adam Wathan, the creator of Tailwind CSS, has an excellent YouTube video showcasing this in further detail.

With @apply, a selector is created in the source file of our Tailwind CSS project. In the below example from the documentation, the addition of this custom class to this button adds the styles indicated in the <style> tags. That being said, that doesn’t preclude us from adding further classes to that button for further styling if required.

For example, if we have four instances of this example button on our page and the final button needs more margin added above it, we can add the margin class to that instance of the button. The important thing to note is that we wouldn’t add that margin rule to our button class, because that extra margin space does not suit every instance of our button.

Customisation

As we’ve mentioned, Tailwind CSS comes with a default theme that has a set of defined styles, such as font-families, colour palettes and more. The full theme can be found on their Github pages. This theme is what we are referencing when using the CDN link, or using the Tailwind CSS playground.

For example, the below screenshot from the documentation shows a section of the default theme’s colour palette – note that the purple-800 corresponds to the colour we referenced in our earlier example.

However, you can customise this to suit your own project’s requirements if you have installed Tailwind CSS with your chosen package manager by editing the config file, under the ‘theme’ section.

When we set our own colours in the theme section of our config file, it might look a little something this:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#6a9beb',
        DEFAULT: '#2a69d1',
        dark: '#022b6e',
      }
    }
  }
}

When we then come to writing our CSS, if we want to apply a background color of #6a9beb, we would add ‘bg-blue-light’ on our chosen element. You can specify your own terminology for referencing the colours, as well as the defined colour value – we could have set ‘blue’ as ‘sapphire’ or anything else, but of course, it’s always good to be sensible about your naming convetions.

What about browser support?

Tailwind CSS V.20 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge and Safari. It does not support any version of IE, including IE11 – if you need to support IE, you can use Tailwind CSS v1.9 instead.

That being said, the key thing to keep in mind when using Tailwind CSS is that you will stil need to check what browsers support which CSS features. For example, if you wanted to use flexbox in your Tailwind CSS, IE9 would not support this – as IE9 does not support flexbox at all. If you need to support IE9, you might have to reconsider flexbox, and opt for something like floats. It will still pay off to use references like caniuse.com to help you decide what CSS features you want to include to create your desired styling.

Resources

References

Colmtuite, 2017 How is this different from inline styles?. Available at: https://github.com/tailwindlabs/discuss/issues/3 [Accessed 10/02/2021]

Eschweiler, Sebastian (2020) Tailwind CSS for Absolute Beginners. Available at: https://medium.com/codingthesmartway-com-blog/tailwind-css-for-absolute-beginners-3e1b5e8fe1a1 [Accessed 05/02/2021]

Ekwuno, Obinna (2019), Tailwind CSS: Is it tomorrow’s Bootstrap? Available at: https://blog.logrocket.com/tailwind-css-is-it-tomorrows-bootstrap-ebe560f9d00b/ [Accessed 10/02/2021]

Hacker News, n.d Tailwind: style your site without writing any CSS comments. Available at: https://news.ycombinator.com/item?id=18362493 [Accessed 05/02/2021]

Okolie, Franklin (no date) Tailwind CSS. Available at: https://tailwind-ui-2.vercel.app// [Accessed 10/02/2021]

Tailwind Labs (2021) 07: Customizing you Design System – Tailwind CSS: From Zero to Production. [online video] Available at: https://www.youtube.com/watch?v=0l0Gx8gWPHk  [Accessed 16/02/2021]

Tailwind CSS (no date) Tailwind CSS. Available at: https://tailwindcss.com/ [Accessed 02/02/2021]

Wathan, Adam (2019) Designing with Tailwind CSS: Extracting Reusable Components. [online video] Available at: https://www.youtube.com/watch?v=3OdRwZu0FQU [Accessed 08/02/2021]

Be the first to leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *