Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) |
Lsokolowski1 (talk | contribs) |
||
| Line 41: | Line 41: | ||
== Utility VS oldSchool == | == Utility VS oldSchool == | ||
Scaled - big ''difference'' on both - '''small''' or big '''long-running''' projects | |||
Contradicts traditional best practices, but: | Contradicts traditional best practices, but: | ||
* '''Designs''' come together '''very fast''' | * '''Designs''' come together '''very fast''' | ||
| Line 53: | Line 55: | ||
<!-- 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 == | |||
YES - directly in elements instead of assigned class name with styles behind | |||
Advantages over inline: | |||
<!-- | |||
Designing with constraints — using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs. | Designing with constraints — using inline styles, every value is a magic number. With utilities, you’re choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs. | ||
Hover, focus, and other states — inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes. | Hover, focus, and other states — inline styles can’t target states like hover or focus, but Tailwind’s state variants make it easy to style those states with utility classes. | ||
Revision as of 00:03, 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 - 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:
