Designing user interfaces with Tailwind CSS

winstonmhango23
Feb 5, 2021
5 min read

Tailwind is a utility-first CSS framework. In contrast to other CSS frameworks like Bootstrap or Materialize CSS it doesn’t come with predefined components. Instead, Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. By using these classes you can rapidly create a custom design with ease.

CONTENT OUTLINE

Defining CSS Utility classes and the difference from normal design with example
Comparison to other CSS Frameworks
Using tailwind CSS Utility classes.
Conclusion

1. Defining what CSS Utility classes are

Creating Html pages and styling them is a core skill every web developer needs to learn and understand pretty well. Before any functionality with either Javascript or back end code is added, you need to properly present your user interfaces to clients. Doing that is quite easy and very easy with small scale projects that may have few components or pages. But it's not an easy task when you are working on medium to large-scale projects. You definitely need some way to generate or easily create Html elements and their styles in a much-simplified way.

That is where CSS frameworks come into the picture. And there are plenty of them to mention. The prominent one apparently is Bootstrap.

The CSS frameworks are mainly in two categories, for the most part, namely, component-based and utility-based. Here, bootstrap is component-based while tailwind CSS, which is our topic of discussion, is utility based.

What are utility classes?

At first, it was difficult for me to come to terms with what utility classes are. But really what they are is simply CSS class names that serve one particular purpose and are named as such. Typically a class like. bg-orange would give you background-color: orange. Unlike a component class like. Nav-link, a utility class like .float-left could show up anywhere, on any element, in any context, so we need to know that it will always do exactly the same thing. Sort of utility classes brings styling directly into the markup, without even the mediation of a name.

Talking of CSS COMPONENT libraries, the idea is to use prebuilt element systems that you have to use as they are. The .nav component has all the CSS utilities pre-composed for you to use as they are.

2. Comparison to other CSS Frameworks

HTailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components. It comes with a menu of predesigned classes(utilities) to build your site with but doesn't impose design decisions that are difficult to undo. What this means is that instead of writing a lot of CSS you will be writing a lot of classes for the HTML elements. In Tailwind CSS you have classes for almost all kinds of Html element properties( margins, padding, backgrounds, font sizes, font families, text colors, shadows, and so on).

Here are examples

this is how you create a button in bootstrap

<button type="button" class="btn btn-primary">Primary</button>

and this is how you create a button in tailwind CSS

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Well, the Bootstrap code looks quite easy!! You might be asking why go for tailwind CSS when Bootstrap is simple? Let's have this scenario: Imagine that we wanted to make the button just slightly smaller in a slider, for example, as compared to the main call to action but same color and rest of the properties? Would you want to create a whole new sizing class just for that unique case? In this scenario, using Tailwinds' many padding classes would be easier and you wouldn’t even have to touch the CSS file.

With Tailwind CSS you can also create classes such as .btn-blue for components that are repeated many more times in your Html files using component classes

this is how you would do that

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>
<style>
.btn {
  @apply font-bold py-2 px-4 rounded;
  }
.btn-blue {
  @apply bg-blue-500 text-white;
  }
.btn-blue:hover {
  @apply bg-blue-700;
  }
 </style>

If you are doing component-based stuff, you definitely will have more urge for Bootstrap as it has quite a bunch. But am a kind of do-it-yourself type, so I find myself doing the tailwind way. I like to just load and feed my clients just what is useful and usable, that doesn't cost them for anything but the package(Bootsrap file system is much larger with a number of both CSS and javascript libraries). If I want a modal, it will just be a few lines of utility classes and four lines of javascript.

3. DUsing Tailwind CSS Utility classes.

You will first need to know CSS at least to work with Tailwind CSS. What you are creating with it is just your elements and assigning class attributes from the tailwind library which styles your element properties as you go.

Let's take a look at these few examples.

Take note that Iam using the CDN version in these examples.

scenario 1:Using custom Html and CSS

<!DOCTYPE html>
<html>
<head>
	<title>simple custon css</title>
	<style type="text/css">
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
	</style>
</head>
<body>
	<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="80f19367-684f-4246-9540-0af174a1875c.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">Messaging app</h4>
    <p class="chat-notification-message">A simple custom css ui</p>
  </div>
</div>
</body>
</html>

scenario 2:Same component but using tailwind css

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div class="p-6 mt-10 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="80f19367-684f-4246-9540-0af174a1875c.svg" alt="Chat icon">
  </div>
  <div>
    <div class="text-xl font-medium text-black">Messaging app</div>
    <p class="text-gray-500">A simple tailwind css ui</p>
  </div>
</div>
</body>
</html>

Try running these two files in your system. Just copy and paste them into your text editors. You should see what we have in the screenshots below.

Apparently, we can see how much code we are to write for a custom css and tailwind css component.

WHAT DO THESE CSS CLASSES DO?

In the example above, we've used:

Tailwind's flexbox and padding utilities (flex, flex-shrink-0, and p-6) to control the overall card layout
The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally
The background color, border radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-md) to style the card's appearance
The width and height utilities (w-12 and h-12) to size the logo image
The space-between utilities (space-x-4) to handle the spacing between the logo and the text
The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

This approach allows us to implement a completely custom component design without writing a single line of custom CSS!

4. SUMMARY.

I hope you have a clear picture of why one would choose a utility library over a component-based one. It gives you control over your design system and gives you the power to override the underlying style properties and their values. With a prebuilt component-based, you will find for the most part trying to override and search through a maze of folders to locate and override certain values of the elements you want to customize. For a full-time front end developer, that's not a big deal. You can have the time to run that battle. But for someone working both front end and back end, you definitely need a system that gives you everything upfront and completely under your control. That is what I really like about tailwind CSS. Also, as a bonus, I can complete my whole project without writing a single line of code!! I just have to call these pre-defined CSS utility classes.