Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) mNo edit summary |
Lsokolowski1 (talk | contribs) |
||
| Line 47: | Line 47: | ||
<!-- 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. --> | <!-- 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 | * 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. | <!-- 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. | * ''Portability'' - both the '''structure''' and '''styling''' live in the same place | ||
* 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 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. --> | ||
* '''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. --> | |||
<!-- | <!-- | ||
| Line 63: | Line 65: | ||
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. | 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:52, 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
- Portability - both the structure and styling live in the same place
- Reusable utilities
===no linear CSS growing
