Tailwind: Difference between revisions

Latest revision as of 10:17, 16 March 2026

THIS IS A DRAFT

This text may not be complete.

title: Tailwind Training Course
author: Lukasz Sokolowski

Tailwind

Tailwind Training Materials

Copyright Notice

This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise.

JOKER (It Is All About CSS Only? Right?)

Joker was here HA HA HA HA HA !!

What's blue and not very heavy?

Collapsed by default

Light blue
(-,

Introduction

Developed by engineer Adam Wathan
- "A CSS framework for building user interfaces"
- highly composable, directly in our markup
- unapologetically modern
It has all we need
- Responsive design, Filters, Dark mode, CSS variables, P3 colors
- CSS grid layout, Transitions and animations, Cascade layers
- Logical properties, Container queries, Gradients, 3D transforms
Alternatives?
- Bootstrap CSS (or it's clones, like ng-bootstrap)
- vanillaframework.io

Intro Con't

Speedy and small
- removes all unused CSS when builds
- smallest it could possible be - mostly less than 10kB of CSS
Build flexy - no touching the CSS filo
- very low-level, design differs between sites
Extension - Tailwind Plus (from creators of framework)
- collection of beautiful, fully responsive UI components
- hundreds of ready-to-use examples, great starting point
- Templates, UI Blocks, UI Kit

Utility VS oldSchool

Scaled - huge difference on both - small or big long-running projects

Contradicts traditional best practices, but:

Designs come together very fast
No accidental breaks in same CSS
Easier maintenance through time
Portability - both the structure and styling live in the same place
Reusable utilities === no linear CSS growing

Utility VS inline

YES - directly in elements instead of assigned class name with styles behind

Advantages over inline:

Advantages over inline
advantage	inline	utility	conseq
constraints	values are magic numbers	predefined design system	easier to build visually consistent UIs
states (hover, focus, etc)	can't target	state variants	easiness
media queries	doesn't work	responsive variants	fully responsive interfaces

Utility Syntax

{prefix}-{value}                /* in general */ 
{prefix}-(<custom-property>)    /* equivalent of - 'prefix: var(<custom-property>);' */
{prefix}-[<value>]              /* equivalent of - 'filter: <value>;' */

Prefix: Represents the CSS property (e.g., text, bg, p, m, border, rounded).

Value: Specifies the style detail (e.g., color, size, spacing, or shape).

Tailwind’s utility-first approach emphasizes

combining small, single-purpose classes directly in HTML
for rapid, consistent styling without writing custom CSS

Common Examples

text-red-500 /* sets text color to red shade 500 */
bg-blue-200 /* sets background color to light blue */
p-4 /* adds 1rem of padding */
m-2 /* adds 0.5rem of margin */
rounded-lg /* applies a large border radius */
flex /* enables flexbox layout */
hover:bg-gray-800 /* changes background on hover */

Advanced Features

/* Arbitrary values: square brackets for custom values */
p-[2.5rem]
text-[1.2rem]
/* Responsive variants: prefix with breakpoints like sm:, md:, lg: */
md:flex
/* State variants: hover:, focus:, active: */
hover:underline
/* Dark mode: dark: prefix
dark:bg-gray-900

Cascade layers

Tailwind uses CSS layers

no need to worry about specificity
simple structure - let's check output.css file

@layer theme, base, components, utilities;
@layer theme {
  :root {
    /* Your theme variables */
  }
}
@layer base {
  /* Preflight styles */
}
@layer components {
  /* Your custom components */
}
/* ... */

The Usuals

Typography - font, color, text, etc
Space - padding, margin
Size - width, height, etc
Background - color, image, repeat
Border - radius, style

P3 colors

Using and customizing the color palette

built-in and carefully crafted by expert designers
ranges 50-950
opacity syntax - bg-green/%
examples

bg-white         /* Sets the background color of an element */
bg-black/75      /* OPACITY example - Sets the alpha channel of the color to 75% */
border-pink-300  /* Sets the border color of an element */
text-gray-950    /* Sets the text color of an element */

Dark mode

dark mode - first-class feature of many operating systems

Using variants to style our site in dark mode:

dark: # prefix

By default uses the prefers-color-scheme CSS media feature

Manual toggling

custom variant

@custom-variant dark (&:where(.dark, .dark *));

data attribute

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

three way - light mode, dark mode, and our system theme

window.matchMedia() API    /* JS api, usually we do our own custom implem (behaviours, localStorage, etc) */

Little magic.. (Effects)

Simple yet meaningful effects

some of the available utilities

box-shadow    /* controlling the box shadow of an element */
text-shadow   /* changes the shadow of a text element */
opacity       /* opacity of element */

exmaples

shadow-lg/20               /* large box(e.g. div) shadow with 20% of opacity */
text-shadow-blue-500/50   /* shade of blue shadow with 50% opacity */
opacity-75
opacity-[.67]

Filters

Utilities

blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia
can be combined together

Usage

filter-none   /* removes all of the filters applied to an element */
blur          /* bluring element */
drop-shadow   /* useful for applying shadows to irregular shapes, like text and SVG elements */
sepia         /* sepia's charm */

Examples

blur-sm, blur-[2px]
drop-shadow-cyan-500/30
sepia-25, sepia-[.33]

Fireworks! (Transitions and animations)

We simply specify which properties should transition when they change

some of the utilities

transition-property   /* which CSS properties will do the transition */
transition-duration   /* how long */
transition-delay      /* when to start */
animation             /* full option */

examples

<button class="bg-green-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ">
  Blow it up
</button>

Alien Magic! (3D transforms)

Rotate, scale, skew - you name it!

skew-x-12, skew-y-12 - on both axes

Responsive

Responsive prefixes in Tailwind CSS

allow to apply utility classes at specific screen sizes
using a mobile-first approach

Default Breakpoints

sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px

How They Work

Unprefixed classes (e.g., text-left) apply to all screen sizes
Prefixed classes (e.g., md:text-center) apply at that breakpoint and above

Example:

text-left sm:text-center md:text-right /* left on mobile, centered on ≥640px, right on ≥768px */

Key Notes

Tailwind uses mobile-first logic - utilities by default work for mobile phones(!)

styles for smaller screens cascade upward

To target a range

combine with max-* (e.g., md:max-lg:flex applies only from 'md' to 'lg')

Customize breakpoints

use arbitrary values like min-[320px]:text-lg
or use the --breakpoint-* theme variables

CSS flex/grid layout

Using flex/grid utilities directly in our HTML

it's so much easier to reason about complex layouts

Example

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
  <div class="bg-blue-200 p-4">Item 1</div>
  <div class="bg-blue-200 p-4">Item 2</div>
  <div class="bg-blue-200 p-4">Item 3</div>
  <div class="bg-blue-200 p-4">Item 4</div>
  <div class="bg-blue-200 p-4">Item 5</div>
  <div class="bg-blue-200 p-4">Item 6</div>
</div>

CSS variables (theme)

Using utility classes as an API for our design tokens

for building custom designs with different typography, colors, shadows, breakpoints, etc
in Tailwind projects we store those values in theme variables

Theme variable

special CSS variables
defined with @theme directive
- influence which utility classes exist in our project