blog

Tailwind The Future Of CSS

In this talk Amadou Sall gives an introduction to Tailwindcss, a utility-first CSS framework for rapidly building custom designs.

Here’s the talk link 📹

Key Takeaways from this talk

  • See Tailwind in action
  • Benefits of using Tailwind and why it’s awesome
  • Perceived barriers
  • Challenges faced when using Tailwind

Approaches when writing CSS

When writing CSS, generally there are two ways:

When styling a button using CSS you’ll have something like this:

1.my-button {
2 padding: 0.5rem 1rem;
3 border-width: 1px;
4 border-color: transparent;
5 border-radius: 0.375rem;
6 color: #fff;
7 line-height: 1.25rem;
8 font-weight: 500;
9 background-color: #1413e9;
10 cursor: pointer;
11}

but you also need to add hover, focus, and active states to this element. So you’ll do something like this:

1.my-button:hover,
2.my-button:active {
3 background-color: #3939e3;
4}
5
6.my-button: focus {
7 outline: none;
8 border-color: #3b67bc;
9}

With this approach:

  • ✅ you’re building custom designs
  • ❌ Time consuming
  • ❌ Not scalable
  • ❌ Unmaintainable
  • ❌ bad Code quality

The other approach is to use a CSS framework like Bootstrap

1<button class="btn btn-primary">My Button</button>

You need to add these two classes to every button.

This method is:

  • ✅ productive, you don’t spend a lot of time writing CSS
  • ✅ no need to be a CSS expert, just add the classes and it works
  • ✅ Code quality is high since you don’t need to worry about naming conventions or repetitive code
  • ❌ UI monotony. All websites that use this framework will look the same.
  • ❌ Hard to customize. You must override styles

Tailwind is a utility first framework. It doesn’t give you components like bootstrap, but it provides reusable CSS utility classes that you can use to build your UI.

Before seeing what Tailwind looks like, make sure that you keep an open mind because once you see how it’s used, it will seem like a terrible idea at first. But once you start getting comfortable using Tailwind, you will only want to use it.

Amadou Sall gives a live coding session at 9:35 during his talk.

Here’s the link for the documentation referenced in the talk.

Use NPM or Yarn to install Tailwind

1# using npm
2npm install tailwindcss
3
4# using Yarn
5yarn add tailwindcss

Add Tailwind to your CSS

1@tailwind base
2
3@tailwind components
4
5@tailwind utilities;

PostCSS will be used for this file. It is like a compiler for CSS, that it will transform the directives to actual CSS

Here’s what a button built using Tailwind looks like

1<div class="p-16">
2 <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-pink-500">
3 My Button
4 </button>
5</div>

Here’s an explanation of what each class does:

Padding

p-16 adds padding to the top, right, bottom, and to the left of an HTML element.

px-2 adds padding to the left and right

py-2 adds padding to the top and bottom

Background color

bg-blue-500 is used to add the background color. this class is made up of 2 parts: bg to add a background color blue-500 the color name + it’s shade. ( You can have blue-900 if you want a darker shade)

color

The text-white class is used to change the text color. It also follows the same naming convention as the background color (text-color)

border-radius

To add a border-radius you simply add the rounded-lg class

Hover state

To add a hover state to an element, you simply add the hover hover: class.

The hover:bg-pink-500 class will make the element’s background color pink on hover.

Amadou gives another example of building a layout using Tailwind at 12:21 in his talk

Why Tailwind is Awesome

Benefits

  • It’s a true design system. It allows you to define everything you need to create your own unique design system
  • It’s responsive to the core. You don’t need to write media queries
  • Highly customizable. You can tweak everything to your liking in the config file.
  • You can build your own tailwind plugins.
  • Smaller bundle size, which means your website will be faster. This is done by removing unused CSS

Great Developer Experience

  • You don’t need to leave your HTML and work in a different CSS file.
  • You don’t worry about naming things.
  • Allows you to rapidly prototype.
  • Refactoring is easy. You don’t need to care about deleting a CSS file.

Perceived barriers

But aren’t we writing inline styles this way?

Not really, because you can easily customize the styles.

Won’t there be a lot of repetitions?

You can create components using tailwind and re-use them.

The bundle size must be huge, right?

When used correctly, you don’t need to worry about the bundle size.

Challenges you might face

  • You need to know CSS. However, it’s a great opportunity to learn CSS through Tailwind.
  • Framework integration is not straight forward.
  • Internet Explorer isn’t targeted by tailwind
  • Working with CMS content is challenging. Since you don’t have access to the HTML directly, you can’t add your utility classes. Thankfully, tailwind provides directives that can be embedded inside CSS files.

Found this article useful? Make sure you share it with other people on Twitter