How to learn?

Tailwind Playground can show “Generated CSS” from html snippet. A good tool to learn things under the hood.

Tailwind

Base Styles

• built on top of modern-normalize.

Spacing

• padding: px-1, pt-2.5
• margin: my-1, m-4, -mt-8
• space bwteen: space-x-4

Sizing

• width: w-12, w-1/6
• min-width
• max-width
• height
• min-height
• max-height
• size

Layout

• aspect ratio
• container: a component for fixing an element’s width to the current breakpoint.
  • @media
• columns: multi-column layout.
  • columns
• break after
• break before
• break inside
• box decoration break
• box sizing: how the total width and height of an element is calculated.
  • box-sizing
• display: display box type of an element.
  • display

Flexbox & Grid

Backgrounds

Borders

Spend some time per day to learn CSS basics.

• Normal Flow
• Syntax
• Selectors
  • Type, class and ID selectors
  • Attribute selectors
  • Pseudo-classes and pseudo-elements
  • Combinators
• Comments
• Colours
• Background
• Borders
• Margins
• Padding
• Height & width
• Box model
• Outline
• Text (alignment, decoration etc.)
• Fonts
• Icons
• Links
• Lists
• Tables
• Display, max-width
• Position
• Align
• Opacity
• Navigation bars
• Dropdowns
• Flexbox
• Grid
• Effects, transitions, animations

Refs

• Learn CSS to prepare your transition into tech