Tailwind

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.

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 */
}
/* ... */

The Usuals

• Typography - font, color, text, etc
• Space - padding, margin
• Size - width, height, etc
• Background - color, image, repeat
• Border - radius, style

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 */

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    /* JS api, usually we do our own custom implem (behaviours, localStorage, etc) */

Little magic.. (Effects)

Simple yet meaningful effects

• some of the available utilities

box-shadow    /* controlling the box shadow of an element */
text-shadow   /* changes the shadow of a text element */
opacity       /* opacity of element */

• exmaple

shadow-lg/20               /* large box(e.g. div) shadow with 20% of opacity */
text-shadow-blue-500/50   /* shade of blue shadow with 50% opacity */
opacity-75
opacity-[.67]

Filters

Utilities

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

Usage

filter-none                  /* TODO... */
filter-(<custom-property>)   /* TODO... */
filter-[<value>]             /* TODO... */

Example TODO

Fireworks! (Transitions and animations)

We simply specify which properties should transition when they change

• some of the utilities

transition-property   /* which CSS properties will do the transition */
transition-duration   /* TODO... */
transition-delay      /* TODO... */
animation             /* TODO... */

• examples

TODO

Alien Magic! (3D transforms)

TODO

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

CSS grid layout

TODO

CSS variables (theme)

TODO

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