Tailwind: Difference between revisions

From Training Material
Jump to navigation Jump to search
← Older editNewer edit →
mNo edit summary
Line 30: Line 30:


=== Intro Con't ===
=== Intro Con't ===
Ship faster and smaller.
* Speedy and smal
text-base
** removes all unused CSS when building for prod
text-gray-950
** final CSS bundle is the smallest it could possible be (mostly less than 10kB of CSS)
Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10kB of CSS to the client.
* Build flexy - and no touching our CSS filo
 
** very low-level, design differs between sites
Build whatever you want, without touching your CSS file.
* Extension - Tailwind Plus (from creators of framework)
text-base
** collection of beautiful, fully responsive UI components
text-gray-950
** hundreds of ready-to-use examples, great starting point
Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.
** Templates, UI Blocks, UI Kit
 
Move even faster with Tailwind Plus.
text-base
text-gray-950
Tailwind Plus is a collection of beautiful, fully responsive UI components, designed and developed by us, the creators of Tailwind CSS. It's got hundreds of ready-to-use examples to choose from, and is guaranteed to help you find the perfect starting point for what you want to build.
Templates, UI Blocks, UI Kit

Revision as of 15:37, 27 January 2026

THIS IS A DRAFT

This text may not be complete.

title
Tailwind Training Course
author
Lukasz Sokolowski


Tailwind

Tailwind Training Materials

Introduction

  • Developed by engineer Adam Wathan
    • "A CSS framework for building user interfaces"
    • can be composed to build any design, 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 smal
    • removes all unused CSS when building for prod
    • final CSS bundle is the smallest it could possible be (mostly less than 10kB of CSS)
  • Build flexy - and no touching our 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
Retrieved from "https://training-course-material.com/index.php?title=Tailwind&oldid=89177"