Tailwind: Difference between revisions
Jump to navigation
Jump to search
Lsokolowski1 (talk | contribs) |
Lsokolowski1 (talk | contribs) |
||
| Line 19: | Line 19: | ||
* Developed by engineer ''Adam Wathan'' | * Developed by engineer ''Adam Wathan'' | ||
** ''"A CSS framework for building user interfaces"'' | ** ''"A CSS framework for building user interfaces"'' | ||
** | ** highly composable, '''directly in''' our '''markup''' | ||
** unapologetically modern | ** unapologetically '''modern''' | ||
* It has all we need | * It has '''all we need''' | ||
** Responsive design, Filters, Dark mode, CSS variables, P3 colors | ** Responsive design, Filters, Dark mode, CSS variables, P3 colors | ||
** CSS grid layout, Transitions and animations, Cascade layers | ** CSS grid layout, Transitions and animations, Cascade layers | ||
** Logical properties, Container queries, Gradients, 3D transforms | ** Logical properties, Container queries, Gradients, 3D transforms | ||
* Alternatives? | * ''Alternatives?'' | ||
** Bootstrap CSS (or it's clones, like ''ng-bootstrap'') | ** '''Bootstrap''' CSS (or it's clones, like ''ng-bootstrap'') | ||
** | ** '''vanilla'''framework.io | ||
=== Intro Con't === | === Intro Con't === | ||
* Speedy and | * Speedy and '''small''' | ||
** removes all unused CSS when | ** '''removes''' all unused CSS when builds | ||
** | ** smallest it could possible be - mostly '''less than 10kB''' of CSS | ||
* Build flexy - | * Build '''flexy''' - no touching the CSS filo | ||
** very low-level, design differs between sites | ** very '''low-level''', design '''differs''' between sites | ||
* Extension - Tailwind Plus (from creators of framework) | * ''Extension'' - '''Tailwind Plus''' (from creators of framework) | ||
** collection of beautiful, fully responsive UI components | ** collection of beautiful, fully responsive '''UI components''' | ||
** hundreds of ready-to-use examples, great starting point | ** hundreds of '''ready-to-use''' examples, great starting point | ||
** Templates, UI Blocks, UI Kit | ** Templates, UI Blocks, UI Kit | ||
== Responsive == | |||
== Filters == | |||
== Dark mode == | |||
== CSS variables == | |||
== P3 colors == | |||
== CSS grid layout == | |||
== Transitions and animations == | |||
== Cascade layers == | |||
== Logical properties == | |||
== Container queries == | |||
== Gradients == | |||
== 3D transforms == | |||
Revision as of 15:45, 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
