Tailwind

From Training Material
Revision as of 05:36, 11 March 2026 by Lsokolowski1 (talk | contribs)
Jump to navigation Jump to search

THIS IS A DRAFT

This text may not be complete.

title
Tailwind Training Course
author
Lukasz Sokolowski


Tailwind

Tailwind Training Materials

JOKER (It Is All About CSS Only? Right?)


Joker was here HA HA HA HA HA !!

What's blue and not very heavy?

Collapsed by default 

Light blue
(-,

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 - huge 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:

Advantages over inline
advantage inline utility conseq
constraints values are magic numbers predefined design system easier to build visually consistent UIs
states (hover, focus, etc) can't target state variants easiness
media queries doesn't work responsive variants fully responsive interfaces

Utility Syntax

{prefix}-{value}

Prefix: Represents the CSS property (e.g., text, bg, p, m, border, rounded).

Value: Specifies the style detail (e.g., color, size, spacing, or shape).


Tailwind’s utility-first approach emphasizes

  • combining small, single-purpose classes directly in HTML
  • for rapid, consistent styling without writing custom CSS

Common Examples

text-red-500 /* sets text color to red shade 500 */
bg-blue-200 /* sets background color to light blue */
p-4 /* adds 1rem of padding */
m-2 /* adds 0.5rem of margin */
rounded-lg /* applies a large border radius */
flex /* enables flexbox layout */
hover:bg-gray-800 /* changes background on hover */

Advanced Features

/* Arbitrary values: square brackets for custom values */
p-[2.5rem]
text-[1.2rem]
/* Responsive variants: prefix with breakpoints like sm:, md:, lg: */
md:flex
/* State variants: hover:, focus:, active: */
hover:underline
/* Dark mode: dark: prefix
dark:bg-gray-900

Cascade layers

Tailwind uses CSS layers

  • no need to worry about specificity
  • simple structure - let's check output.css file
@layer theme, base, components, utilities;
@layer theme {
  :root {
    /* Your theme variables */
  }
}
@layer base {
  /* Preflight styles */
}
@layer components {
  /* Your custom components */
}
/* ... */

Typography, Space, Size, Background, Border

TODO

P3 colors

Using and customizing the color palette

  • built-in and carefully crafted by expert designers
  • ranges 50-950
  • opacity syntax - bg-green/%
  • examples
bg-white         /* Sets the background color of an element */
bg-black/75      /* OPACITY example - Sets the alpha channel of the color to 75% */
border-pink-300  /* Sets the border color of an element */
text-gray-950    /* Sets the text color of an element */

Responsive

Responsive prefixes in Tailwind CSS

  • allow to apply utility classes at specific screen sizes
  • using a mobile-first approach

Default Breakpoints

  • sm: ≥ 640px
  • md: ≥ 768px
  • lg: ≥ 1024px
  • xl: ≥ 1280px
  • 2xl: ≥ 1536px

How They Work

  • Unprefixed classes (e.g., text-left) apply to all screen sizes
  • Prefixed classes (e.g., md:text-center) apply at that breakpoint and above

Example: 

text-left sm:text-center md:text-right /* left on mobile, centered on ≥640px, right on ≥768px */

Key Notes

Tailwind uses mobile-first logic - utilities by default work for mobile phones(!)

  • styles for smaller screens cascade upward

To target a range

  • combine with max-* (e.g., md:max-lg:flex applies only from 'md' to 'lg')

Customize breakpoints

  • use arbitrary values like min-[320px]:text-lg
  • or use the --breakpoint-* theme variables

Filters

Utilities

  • blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia
  • can be combined together

Usage 

filter-none
filter-(<custom-property>)
filter-[<value>]

Dark mode

dark mode - first-class feature of many operating systems

Using variants to style our site in dark mode: 

dark: # prefix

By default uses the prefers-color-scheme CSS media feature


Manual toggling

  • custom variant
@custom-variant dark (&:where(.dark, .dark *));
  • data attribute
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
  • three way - light mode, dark mode, and our system theme
window.matchMedia() API

CSS grid layout

Transitions and animations

Logical properties

Container queries

Gradients

3D transforms

CSS variables

Exercises

TODO: update it with the final version from 'antyptcss'

Collapsed by default 

###
#
# Exercises for 1day Tailwind course
#
#
# Simple setup:
# 
# 1. tailwind command line standalone tool - put it in the parent folder sucked in IDE (Documents, etc) 
# 1.1. execution example
# ./tailwindcss-windows-x64.exe --cwd [path_to]/antyptcss -i input.css -o output.css --watch
#
# 2. npx serve -d -C
#
# 3. tailwind plugin in IDE, i.e. for VSC
#
# 4. helpers: rgbtohex.net
#
###

PART I - make it work
1. Get down this website 'antypornografia.pl'

2. Start replacing css with Tailwind
2.1. Buttons - header, .menuitem
2.2. Links - .linkis, .green-link, #antypornografiapl, #whodid
2.3. Headings (h1, h2, etc) - h4
2.4. ?


PART II - make it better (neatier, nicer, lookier, etc)
1. Buttons
1.1. make it visible when hover/focus
1.2. make the pointer reflect them
?.?. your ideas? (=


PART III - fix it, where needed
1. Buttons
1.1. h1 in header - what happened there? (-;
2. Links
2.1. text-decoration - it's none by deafult, btw, so? (-' 
3. default display none and delayed actions - do we really need jQ for that here, huh? (-,
4. ?


PART IV - refactor it (theme customs, less redundancy, etc)
1. Buttons
1.1. font-weight - better to use deafult pre-defined utility instead of 700 (-;
1.2. divide border in menu - no repeating of code
1.3. add full border with radius, make it transparent
1.4. transition border color with 1/4 of the second
2. Links
2.1. font family - make it as our custom variable in theme
2.2. font-size - similar to p.1.1. above
3. Headings
3.1. h4 - font-size: 2.4em; line-height: 1.2; use shorthand utility (-;
?.?. your ideas..?


PART V - If there's time.. (some nice real-life cases)
0. ??
1. Rounding corners
2. Centering
3. Ant button
4. Responsive table
5. Dropdown, icon, subgrid


PART VI - If more time.. nextjs example
Retrieved from "https://training-course-material.com/index.php?title=Tailwind&oldid=89262"