Tailwind: Difference between revisions

Revision as of 04:12, 11 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

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}

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

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

Filters

Utilities

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

Usage <sytaxhighlight lang="css"> filter-none filter-(<custom-property>) filter-[<value>] </sytaxhighlight>

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

CSS variables

P3 colors

CSS grid layout

Transitions and animations

Cascade layers

Logical properties

Container queries

Gradients

3D transforms

Exercises

TODO: update it with the final version from 'antyptcss'