CSS for Developers

Tailwind CSS

Concept

What is Tailwind CSS?

  • a modern utility-first CSS framework
  • provides pre-defined, reusable classes for styling
  • fully responsive by default
  • no arbitrary values — everything is based on a scale
  • only outputs CSS which is actually used

Utility-first?

Tailwind's concept was a departure from previous approaches.

  • prioritises single-purpose over component-based classes
  • small, atomic classes that can be combined
  • highly flexible and customisable

Features

Utility Classes

Classes for styling elements directly in HTML.

  • spacing: mx-auto (horizontal margin), p-2 (padding)
  • display: flex, grid, hidden
  • typography: text-xl, text-black, font-medium
  • sizes: max-w-md (max width), size-12 (height & width)
  • … and many more, for almost every CSS property and value

Breakpoint Prefixes

Prefix any class with a breakpoint size to apply that style only for screens larger than that.


                    

                        
one flex item

                        
second flex item

Displays elements in a column on small screens and in a row above 768px screen width.

State and Pseudo-Selector Prefixes

Like breakpoints, different element states and relationships can be targeted with the respective prefix too.

  • hover:… to apply styles on mouse over
  • focus-visible:… defines focus styles for keyboard users
  • first:… to style first sibling
  • has-checked:… applies if a checked checkbox is inside
  • … and many more, check the Tailwind documentation

Theming

Tailwind is fully customisable by specifying theme config (v3), setting theme variables (v4), or adding custom styles.

You can overwrite any and all aspects of Tailwind: colors, sizes, fonts, etc.

How to use

Setup

  1. install: e.g. npm i tailwindcss @tailwindcss/vite
  2. configure: add respective plugin to Vite or PostCSS config, depends on your setup/framework
  3. import: @import "tailwindcss"; in root CSS file
  4. use in HTML

Using Tailwind CSS

Basic usage:


                        <div class="text-center bg-blue-500 text-white p-4 rounded-lg">
                            Hello, World!
                        </div>
Hello, World

Design Token

Tailwind works nicely in with a Design System using Design Token.

  • consistent styling: use token to configure Tailwind for consistent design with little effort
  • limiting choices: reducing the amount of possible values makes it easier to decide, i.e. having only a few different spacings instead of any possible pixel value

Why?

The use of Tailwind avoids some of the major issues/challenges:

  • finding appropriate selectors and handling specificity
  • style encapsulation: deals with the global nature of CSS
  • maintenance: only includes CSS which is used

Summary

  • Tailwind CSS is a powerful utility-first framework
  • saves time by avoiding writing custom CSS
  • highly customisable and responsive
  • works well with design systems

Docs and more at tailwindcss.com

Questions?