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.

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

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