Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) |
Lsokolowski1 (talk | contribs) mNo edit summary |
||
| Line 40: | Line 40: | ||
** ''Templates, UI Blocks, UI Kit'' | ** ''Templates, UI Blocks, UI Kit'' | ||
== Utility VS oldSchool == | |||
Contradicts traditional best practices, but: | |||
* '''Designs''' come together '''very fast''' | |||
<!-- You get things done faster — you don't spend any time coming up with class names, making decisions about selectors, or switching between HTML and CSS files, so your designs come together very fast. --> | |||
* No accidental '''breaks''' in same CSS | |||
<!-- Making changes feels safer — adding or removing a utility class to an element only ever affects that element, so you never have to worry about accidentally breaking something another page that's using the same CSS. --> | |||
* Easier '''maintenance''' through time | |||
<!-- Maintaining old projects is easier — changing something just means finding that element in your project and changing the classes, not trying to remember how all of that custom CSS works that you haven't touched in six months. | |||
* Your code is more portable — since both the structure and styling live in the same place, you can easily copy and paste entire chunks of UI around, even between different projects. | |||
* 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. | |||
<!-- | |||
These benefits make a big difference on small projects, but they are even more valuable for teams working on long-running projects at scale. | |||
Why not just use inline styles? | |||
A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class. | |||
But using utility classes has many important advantages over inline styles, for example: | |||
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. | |||
Media queries — you can’t use media queries in inline styles, but you can use Tailwind’s responsive variants to build fully responsive interfaces easily. | |||
--> | |||
== Responsive == | == Responsive == | ||
== Filters == | == Filters == | ||
Revision as of 23:48, 27 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
Contradicts traditional best practices, but:
- Designs come together very fast
- No accidental breaks in same CSS
- Easier maintenance through time
