Tailwind

From Training Material
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


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] or 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

Responsive

Filters

Dark mode

CSS variables

P3 colors

CSS grid layout

Transitions and animations

Cascade layers

Logical properties

Container queries

Gradients

3D transforms

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=89233"