Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) mNo edit summary |
Lsokolowski1 (talk | contribs) |
||
| Line 41: | Line 41: | ||
== Utility VS oldSchool == | == Utility VS oldSchool == | ||
Scaled - | Scaled - huge ''difference'' on both - '''small''' or big '''long-running''' projects | ||
Contradicts traditional best practices, but: | Contradicts traditional best practices, but: | ||
| Line 54: | Line 54: | ||
* '''Reusable''' utilities <code>===</code> no linear CSS growing | * '''Reusable''' utilities <code>===</code> no linear CSS growing | ||
<!-- Your CSS stops growing — since utility classes are so reusable, your CSS doesn't continue to grow linearly with every new feature you add to a project. --> | <!-- Your CSS stops growing — since utility classes are so reusable, your CSS doesn't continue to grow linearly with every new feature you add to a project. --> | ||
== Utility VS inline == | == Utility VS inline == | ||
Revision as of 00:29, 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 | |
|---|---|---|---|
| constraints | values are magic numbers | predefined design system | |
| states (hover, focus, etc) | can't target | state variants | |
| media queries | doesn't work | responsive variants |
