Tailwind: Difference between revisions

Revision as of 13:54, 10 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

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 */

Responsive

Filters

Dark mode

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'