talk

Tailwind - The Future of CSS is Here!

Can you write a beautiful, maintainable, and responsive web applications without a single line of CSS? With Tailwind, you can.

Can you write a beautiful, maintainable, and responsive web applications without a single line of CSS? With Tailwind, you can.

Unlike the majority of CSS frameworks that give you prebuilt components, Tailwind provides you with low-level CSS utility classes that you can combine to create custom designs.

The goal of this presentation is to help you understand the value proposition of the utility-first philosophy. We will have a look at:

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

Key Takeaways from this talk

Approaches when writing CSS

When writing CSS, generally there are two ways:

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


.my-button{
    padding: .5rem 1rem;
    border-width: 1px;
    border-color: transparent;
    border-radius: .375rem;
    color:#fff;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: #1413e9;
    cursor: pointer;
}

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

.my-button:hover,
.my-button:active {
    background-color: #3939e3;
}

.my-button: focus{
    outline:none;
    border-color:#3B67Bc;
}

With this approach:

The other approach is to use a CSS framework like Bootstrap

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

You need to add these two classes to every button.

This method is:

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

Terminal
# using npm
npm install tailwindcss

# using Yarn
yarn add tailwindcss

Add Tailwind to your CSS


@tailwind base

@tailwind components

@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

<div class="p-16">
 <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-pink-500">My Button</button>
</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

Great Developer Experience

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

✏️ Edit on GitHub