Layout

Container: container
Box Sizing: box-border | box-content
Display: block | inline-block | inline | flex | grid
Flexbox:
    Flex Direction: flex-row | flex-row-reverse | flex-col | flex-col-reverse
    Justify Content: justify-start | justify-end | justify-center | justify-between | justify-around
    Align Items: items-start | items-end | items-center | items-baseline | items-stretch
    Flex Wrap: flex-wrap | flex-wrap-reverse | flex-nowrap

Spacing

Padding: p-{size} | px-{size} | py-{size} | pt-{size} | pb-{size} | pl-{size} | pr-{size}
Margin: m-{size} | mx-{size} | my-{size} | mt-{size} | mb-{size} | ml-{size} | mr-{size}

Sizing

Width: w-{size} | w-auto | w-full | w-screen
Height: h-{size} | h-auto | h-full | h-screen

Typography

Font Size: text-xs | text-sm | text-base | text-lg | text-xl | text-2xl | text-3xl | text-4xl
Font Weight: font-thin | font-light | font-normal | font-medium | font-semibold | font-bold | font-extrabold | font-black
Text Alignment: text-left | text-center | text-right | text-justify
Text Color: text-{color}

Colors

Background Color: bg-{color}
Text Color: text-{color}
Border Color: border-{color}

Borders

Border Width: border | border-0 | border-2 | border-4 | border-8
Border Radius: rounded | rounded-md | rounded-lg | rounded-full
Border Style: border-solid | border-dashed | border-dotted

Effects

Shadow: shadow | shadow-md | shadow-lg | shadow-xl | shadow-2xl
Opacity: opacity-{value}

Transitions and Animations

Transition Property: transition | transition-all | transition-none
Duration: duration-{time}

This cheat sheet captures a variety of classes for quick reference. Tailwind’s documentation is incredibly detailed and includes many more utilities and variations, so it's a good idea to explore it for more complex needs. User sizes as well please ChatGPT

Sure, adding specific size values to the Tailwind CSS cheat sheet will help you quickly determine which size classes to use for padding, margin, width, and height. Here's a breakdown of the common size scale used in Tailwind CSS: Size Scale

Tailwind CSS uses a scale for spacing (padding, margin), dimensions (width, height), and gaps, among other properties. The default scale is as follows, but it can be customized in your Tailwind configuration file (tailwind.config.js):

0: 0rem (0px)
px: 1px
0.5: 0.125rem (2px)
1: 0.25rem (4px)
1.5: 0.375rem (6px)
2: 0.5rem (8px)
2.5: 0.625rem (10px)
3: 0.75rem (12px)
3.5: 0.875rem (14px)
4: 1rem (16px)
5: 1.25rem (20px)
6: 1.5rem (24px)
7: 1.75rem (28px)
8: 2rem (32px)
9: 2.25rem (36px)
10: 2.5rem (40px)
11: 2.75rem (44px)
12: 3rem (48px)
14: 3.5rem (56px)
16: 4rem (64px)
20: 5rem (80px)
24: 6rem (96px)
28: 7rem (112px)
32: 8rem (128px)
36: 9rem (144px)
40: 10rem (160px)
44: 11rem (176px)
48: 12rem (192px)
52: 13rem (208px)
56: 14rem (224px)
60: 15rem (240px)
64: 16rem (256px)
72: 18rem (288px)
80: 20rem (320px)
96: 24rem (384px)

Using Sizes in Classes

You apply these sizes using the format prefix-{size}, where prefix could be m for margin, p for padding, w for width, and h for height. Here are some examples:

Margin and Padding: m-5, p-8
Width and Height:

Web Development Cheat Sheets

This README contains detailed cheat sheets for Tailwind CSS, including Flexbox, Grid, specific size scales, and basic HTML layouting, designed to enhance your web development workflow.

Tailwind CSS Cheat Sheet

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It provides classes for nearly every style you might need to apply, making it highly modular and adaptable.

Tailwind CSS Flexbox Cheat Sheet

Flexbox is designed for responsive layout design and item alignment within a container.

Flex Container

flex | inline-flex

Direction

flex-row | flex-row-reverse | flex-col | flex-col-reverse

Wrap

flex-wrap | flex-wrap-reverse | flex-nowrap

Justify Content

justify-start | justify-end | justify-center | justify-between | justify-around | justify-evenly

Align Items

items-start | items-end | items-center | items-baseline | items-stretch

Align Content

content-start | content-center | content-end | content-between | content-around | content-evenly

Align Self

self-auto | self-start | self-end | self-center | self-stretch | self-baseline

Grow and Shrink

flex-grow | flex-grow-0 | flex-shrink | flex-shrink-0

Tailwind CSS Grid Cheat Sheet

Grid is utilized for constructing complex web layouts with ease.

Grid Container

grid | inline-grid

Template Columns

grid-cols-1 to grid-cols-12 | grid-cols-none

Template Rows

grid-rows-1 to grid-rows-6 | grid-rows-none

Column/Row Gap

gap-{size} | gap-x-{size} | gap-y-{size}

Auto Flow

grid-flow-row | grid-flow-col | grid-flow-row-dense | grid-flow-col-dense

Column Start/End

col-start-{n} | col-end-{n}

Row Start/End

row-start-{n} | row-end-{n}

Tailwind CSS Size Scale

The framework uses a default scale for sizing that applies to padding, margin, width, height, and gaps:

0 (0px), px (1px), 0.5 (2px), 1 (4px), 1.5 (6px), 2 (8px), 2.5 (10px), 3 (12px), 3.5 (14px), 4 (16px), etc., up to 96 (384px).

HTML Layouting Cheat Sheet

HTML layout elements are crucial for structured web design and are outlined here for quick reference.

Document Structure

<!DOCTYPE html>: Declares document type and version.
<html>: Root element of an HTML page.
<head>: Contains metadata, scripts, and links to stylesheets.
<body>: Contains the content of the web page.

Major Sections

<header>, <footer>: For introductory content or navigational links, and footer information.
<nav>: For navigation links.
<main>: For the dominant content of the <body>, unique to the document.
<section>, <article>, <aside>: For grouping thematically related content, independent content, and tangentially related content as sidebars.
<div>: Generic container for any part of content.
<span>: Inline container for part of text or document.

These cheat sheets provide a solid foundation for using Tailwind CSS and HTML effectively in your projects. Feel free to modify and expand these cheat sheets as needed.