Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) |
Lsokolowski1 (talk | contribs) |
||
| Line 62: | Line 62: | ||
|+ Advantages over inline | |+ Advantages over inline | ||
|- | |- | ||
! advantage !! inline !! utility !! | ! advantage !! inline !! utility !! conseq | ||
|- | |- | ||
| constraints || values are magic numbers || predefined design system | | constraints || values are magic numbers || predefined design system || easier to build visually consistent UIs | ||
|- | |- | ||
| states (hover, focus, etc) || can't target || state variants | | states (hover, focus, etc) || can't target || state variants || easiness | ||
|- | |- | ||
| media queries || doesn't work || responsive variants | | media queries || doesn't work || responsive variants || fully responsive interfaces | ||
|} | |} | ||
<!-- | <!-- | ||
Revision as of 00:31, 28 January 2026
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 - 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:
| 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 |
