Tailwind

THIS IS A DRAFT

This text may not be complete.

title

Tailwind Training Course

author

Lukasz Sokolowski

Tailwind

Tailwind Training Materials

Copyright Notice

Copyright © 2004-2026 by NobleProg Limited All rights reserved.

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.

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 - big 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: