# Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

# Utility-first CSS frameworks

Utility-first frameworks provide a low-level utility class to build out custom designs within your HTML file. Utility classes are named according to their intended purpose, such that they’re easily understandable to the average person.

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

The primary purpose of the class .bg-white is to add a background color of white. There are different classes for different purposes, such as setting background color or adding a margin or padding to a container.

There are other Utility-first frameworks as Tachyons, Sched.css, Basscss, Expresive css and others. See the blog Top utility-first CSS frameworks (opens new window) 2021.

# Tailwind CSS Example

Clone the repo ULL-MII-SYTWS/tailwind-learning (opens new window)

Run:

npm install

and then run

npm run build:tailwind

> hello-tailwind@1.0.0 build:tailwind
> tailwindcss -i ./src/input.css -o ./public/output.css --watch

1
2
3
4

Use live server extension on VScode to see the results.

let us consider this code in the file index.html:

  <div class="p-6 
       max-w-sm mx-auto 
       bg-white rounded-xl shadow-lg 
       flex items-center space-x-4">
    <div class="shrink-0">
      <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
    </div>
    <div>
      <div class="text-xl font-medium text-black">ChitChat</div>
      <p class="text-slate-500">You have a new message!</p>
    </div>
  </div>

1
2
3
4
5
6
7
8
9
10
11
12

In the example above, we’ve used:

Tailwind’s flexbox and padding utilities (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-lg) 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.

# Exercise

Reproduce and understand the concepts introduced in the tutorial Responsive Global Navbar in Next.js with tailwindcss (opens new window)

# Tailwind CSS

# Utility-first CSS frameworks

# Tailwind CSS Example

# Exercise

# References