\documentclass[10pt,a4paper]{article}

% Packages
\usepackage{fancyhdr}           % For header and footer
\usepackage{multicol}           % Allows multicols in tables
\usepackage{tabularx}           % Intelligent column widths
\usepackage{tabulary}           % Used in header and footer
\usepackage{hhline}             % Border under tables
\usepackage{graphicx}           % For images
\usepackage{xcolor}             % For hex colours
%\usepackage[utf8x]{inputenc}    % For unicode character support
\usepackage[T1]{fontenc}        % Without this we get weird character replacements
\usepackage{colortbl}           % For coloured tables
\usepackage{setspace}           % For line height
\usepackage{lastpage}           % Needed for total page number
\usepackage{seqsplit}           % Splits long words.
%\usepackage{opensans}          % Can't make this work so far. Shame. Would be lovely.
\usepackage[normalem]{ulem}     % For underlining links
% Most of the following are not required for the majority
% of cheat sheets but are needed for some symbol support.
\usepackage{amsmath}            % Symbols
\usepackage{MnSymbol}           % Symbols
\usepackage{wasysym}            % Symbols
%\usepackage[english,german,french,spanish,italian]{babel}              % Languages

% Document Info
\author{CSS (helenn)}
\pdfinfo{
  /Title (tailwindcss.pdf)
  /Creator (Cheatography)
  /Author (CSS (helenn))
  /Subject (TailwindCSS Cheat Sheet)
}

% Lengths and widths
\addtolength{\textwidth}{6cm}
\addtolength{\textheight}{-1cm}
\addtolength{\hoffset}{-3cm}
\addtolength{\voffset}{-2cm}
\setlength{\tabcolsep}{0.2cm} % Space between columns
\setlength{\headsep}{-12pt} % Reduce space between header and content
\setlength{\headheight}{85pt} % If less, LaTeX automatically increases it
\renewcommand{\footrulewidth}{0pt} % Remove footer line
\renewcommand{\headrulewidth}{0pt} % Remove header line
\renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit
% This two commands together give roughly
% the right line height in the tables
\renewcommand{\arraystretch}{1.3}
\onehalfspacing

% Commands
\newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour
\newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols
\newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns
\newcommand{\tn}{\tabularnewline} % Required as custom column type in use

% Font and Colours
\definecolor{HeadBackground}{HTML}{333333}
\definecolor{FootBackground}{HTML}{666666}
\definecolor{TextColor}{HTML}{333333}
\definecolor{DarkBackground}{HTML}{022542}
\definecolor{LightBackground}{HTML}{F7F8F9}
\renewcommand{\familydefault}{\sfdefault}
\color{TextColor}

% Header and Footer
\pagestyle{fancy}
\fancyhead{} % Set header to blank
\fancyfoot{} % Set footer to blank
\fancyhead[L]{
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{C}
    \SetRowColor{DarkBackground}
    \vspace{-7pt}
    {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent
        \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}}
    }
\end{tabulary}
\columnbreak
\begin{tabulary}{11cm}{L}
    \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{TailwindCSS Cheat Sheet}}}} \\
    \normalsize{by \textcolor{DarkBackground}{CSS (helenn)} via \textcolor{DarkBackground}{\uline{cheatography.com/210140/cs/45761/}}}
\end{tabulary}
\end{multicols}}

\fancyfoot[L]{ \footnotesize
\noindent
\begin{multicols}{3}
\begin{tabulary}{5.8cm}{LL}
  \SetRowColor{FootBackground}
  \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}}  \\
  \vspace{-2pt}CSS (helenn) \\
  \uline{cheatography.com/helenn} \\
  \end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}}  \\
   \vspace{-2pt}Not Yet Published.\\
   Updated 13th March, 2025.\\
   Page {\thepage} of \pageref{LastPage}.
\end{tabulary}
\vfill
\columnbreak
\begin{tabulary}{5.8cm}{L}
  \SetRowColor{FootBackground}
  \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}}  \\
  \SetRowColor{white}
  \vspace{-5pt}
  %\includegraphics[width=48px,height=48px]{dave.jpeg}
  Measure your website readability!\\
  www.readability-score.com
\end{tabulary}
\end{multicols}}




\begin{document}
\raggedright
\raggedcolumns

% Set font size to small. Switch to any value
% from this page to resize cheat sheet text:
% www.emerson.emory.edu/services/latex/latex_169.html
\footnotesize % Small font.

\begin{multicols*}{2}

\begin{tabularx}{8.4cm}{x{2.48 cm} x{5.52 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Button}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{cursor-not-allowed} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{bg-gradient-to-bl {\bf{from}}-purple-500 {\bf{via}}-yellow-500 {\bf{to}}-green-400} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{bg-gradient-to-t} & Gradient from bottom to top \tn 
% Row Count 5 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{bg-gradient-to-b} & Gradient from top to bottom \tn 
% Row Count 7 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{bg-gradient-to-l} & Gradient from right to left \tn 
% Row Count 9 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{bg-gradient-to-r} & Gradient from left to right \tn 
% Row Count 11 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{bg-gradient-to-tl} & Gradient from bottom-right to top-left \tn 
% Row Count 13 (+ 2)
% Row 7
\SetRowColor{white}
\seqsplit{bg-gradient-to-tr} & Gradient from bottom-left to top-right \tn 
% Row Count 15 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\seqsplit{bg-gradient-to-bl} & Gradient from top-right to bottom-left \tn 
% Row Count 17 (+ 2)
% Row 9
\SetRowColor{white}
\seqsplit{bg-gradient-to-br} & Gradient from top-left to bottom-right \tn 
% Row Count 19 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{Can define custom button styles in tailwind css \newline  \newline 1. use @layer components in global.css \newline  \newline @layer components \{ \newline     .btn-primary \{ \newline       @apply px-4 py-2 bg-blue-500 text-white font-semibold rounded shadow-md hover:bg-blue-600 transition; \newline     \} \newline \} \newline  \newline 2. import global path at your page \newline import "../styles/global.css";}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.44 cm} x{4.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{ul / li}}  \tn
% Row 0
\SetRowColor{LightBackground}
list-disc & list-decimal \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{marker (Style Numbers)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{list-inside} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}ul class="list-disc pl-6 space-y-2 marker:text-sky-400"\textgreater{} \newline         \textless{}li\textgreater{}5 cups chopped Porcini mushrooms\textless{}/li\textgreater{} \newline         \textless{}li\textgreater{}1/2 cup of olive oil\textless{}/li\textgreater{} \newline         \textless{}li\textgreater{}3lb of celery\textless{}/li\textgreater{} \newline \textless{}/ul\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.28 cm} x{2.812 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Text align}}  \tn
% Row 0
\SetRowColor{LightBackground}
text-left & text-center & text-right \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.432 cm} x{2.432 cm} x{2.736 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Text transforms}}  \tn
% Row 0
\SetRowColor{LightBackground}
uppercase & lowercase & capitalize \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{5.52 cm} p{2.48 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Font size}}  \tn
% Row 0
\SetRowColor{LightBackground}
text-xs & 12px \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
text-sm & 14px \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
text-base & 16px \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
text-lg & 18px \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
text-xl & 20px \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
text-2xl & 24px \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
text-9xl & 128px \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
text-{[}50px{]} & Valid \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{You can extend Tailwind's font size scale in tailwind.config.js: \newline export default \{ \newline   theme: \{ \newline     extend: \{ \newline       fontSize: \{ \newline         'xxs': '10px', \newline         'huge': '100px', \newline       \} \newline     \} \newline   \} \newline \} \newline  \newline .astro: \newline  \textless{}h1 class="text-huge"\textgreater{}About\textless{}/h1\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.888 cm} x{2.432 cm} x{2.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Background colors / Text colors}}  \tn
% Row 0
\SetRowColor{LightBackground}
bg-red-400 & \seqsplit{text-red-400} &  \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
bg-primary & \seqsplit{bg-secondary} & bg-tertiary \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
bg-alt & bg-white & bg-black \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{3}{x{8.4cm}}{bg-placeholder} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
text-{[}\#a4d01e{]} & bg-{[}\#a4d01e{]} &  \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{extend: \{ \newline       {\bf{colors:\{}} \newline         primary:"\#1e40AF", \newline       \} \newline     \}, \newline  \newline \textless{}div class="{\bf{bg-primary}}"\textgreater{}\textless{}/div\textgreater{} \newline \textless{}p class="{\bf{text-primary}}"\textgreater{}About\textless{}/p\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.584 cm} x{2.508 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Text decoration}}  \tn
% Row 0
\SetRowColor{LightBackground}
underline & overline & line-through \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{3}{x{8.4cm}}{decoration-red-500} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{decoration-solid} & \seqsplit{decoration-double} & \seqsplit{decoration-dotted} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{decoration-dashed} & \seqsplit{decoration-wavy} &  \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
decoration-0 & decoration-1 & decoration-2 \tn 
% Row Count 7 (+ 1)
% Row 5
\SetRowColor{white}
decoration-4 & decoration-8 &  \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{\textless{}h1 class="text-blue-600 line-through decoration-red-200 decoration-wavy decoration-4"\textgreater{}About\textless{}/h1\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.128 cm} x{2.964 cm} x{2.508 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Font weight}}  \tn
% Row 0
\SetRowColor{LightBackground}
font-thin & \seqsplit{font-extralight} & font-light \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{font-normal} & font-medium & \seqsplit{font-semibold} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
font-bold & font-extrabold & font-black \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.8 cm} x{1.976 cm} x{1.824 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Font family}}  \tn
% Row 0
\SetRowColor{LightBackground}
font-sans (default) & \seqsplit{font-serif} & \seqsplit{font-mono} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{fontFamily: \{ \newline         fancy: {[}'"Poppins"', 'sans-serif'{]},  \newline         code: {[}'"Fira Code"', 'monospace'{]},  \newline       \}, \newline  \newline \textless{}h1 class="font-code"\textgreater{}Testing\textless{}/h1\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Line height}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{leading-tight (1.25)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{leading-snug (1.375)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{leading-normal (1.5)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{leading-relaxed (1.625)} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{leading-loose (2)} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{leading-{\bf{{[}1.1{]}}}} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Letter Spacing}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{tracking-tighter (-0.05em)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{tracking-tight (-0.025em)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{tracking-normal(0em)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{tracking-wide(0.025em)} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{tracking-widest(0.1em)} \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.68 cm} x{4.32 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Shadow}}  \tn
% Row 0
\SetRowColor{LightBackground}
shadow-{\bf{xl}} & shadow-gray-400 \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{shadow-inner (Applies the shadow inside the element)} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{text ✔elements ❌(div/button/image)} \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{boxShadow: \{ \newline         'neon-green': '0px 4px 10px rgba(164, 208, 30, 0.6)', \newline       \}, \newline  \newline  \newline \textless{}div class="shadow-neon-green w-32 h-44"\textgreater{}\textless{}/div\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.64 cm} x{5.36 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Opacity}}  \tn
% Row 0
\SetRowColor{LightBackground}
opacity & opacity-{\bf{20}} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{0.8 cm} p{0.8 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Blur}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{blur-{\bf{sm}}} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Cursor}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-auto (default browser cursor)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-default (default arrow pointer)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-pointer (pointer hand ☝)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-text (text selection )} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-not-allowed (🚫Shows a blocked circle)} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-wait (⏳Shows a loading wait cursor)} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-progress (Shows a progress indicator)} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-move (✥ Move cursor (for draggable elements)} \tn 
% Row Count 9 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-grab (🖐 Open hand cursor (grabbable)} \tn 
% Row Count 10 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-grabbing (✊ Closed hand cursor, while dragging)} \tn 
% Row Count 12 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-n-resize (⬆ Resize vertically (north)} \tn 
% Row Count 13 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{{\bf{ a lot different area resize }}} \tn 
% Row Count 14 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-none (hides the cursor)} \tn 
% Row Count 15 (+ 1)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-help (shows a question mark cursor)} \tn 
% Row Count 16 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{cursor-zoom-in (🔍➕)} \tn 
% Row Count 17 (+ 1)
% Row 15
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{cursor-zoom-out (🔍➖)} \tn 
% Row Count 18 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Position}}  \tn
% Row 0
\SetRowColor{LightBackground}
absolute & relative \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
fixed & ticky \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{left / top / right / bottom} \tn 
% Row Count 3 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{scale-*}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/helenn_1741361423_Screenshot 2025-03-07 233003.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Blend modes}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-normal (default, no blend)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-multiply (multiply, darken effect)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-screen (screen, lighten effect)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-overlay (overlay, contrast effect)} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-darken (darken)} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-color-dodge (color dodge)} \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-color-burn (color burn)} \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-difference (difference)} \tn 
% Row Count 8 (+ 1)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-exclusion (exclusion 排除)} \tn 
% Row Count 9 (+ 1)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-hue (hue 色调)} \tn 
% Row Count 10 (+ 1)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-saturation (saturation饱和)} \tn 
% Row Count 11 (+ 1)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-color (color)} \tn 
% Row Count 12 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{mix-blend-luminosity (luminosity亮度)} \tn 
% Row Count 13 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Other}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{whitespace-nowrap (Prevents text from wrapping to the next line.)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{overflow-hidden (Hides overflowing content (anything that goes beyond the container).)} \tn 
% Row Count 4 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{2.432 cm} x{3.192 cm} p{1.976 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Width}}  \tn
% Row 0
\SetRowColor{LightBackground}
w-auto & w-{\bf{5}} &  \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
h-auto & h-{\bf{5}} &  \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
w-1/2 & w-1/3 & w-2/4 \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
h-1/2 & h-1/3 & h-2/4 \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
w-full & w-screen &  \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
h-full & h-screen &  \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{w-10p (Invalid)} \tn 
% Row Count 7 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{width:\{ \newline         "width":"10\%", \newline       \}, \newline       height:\{ \newline         "height":"50\%", \newline       \}, \newline  \newline \textless{}div class="bg-primary w-width h-height"\textgreater{}Background\textless{}/div\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.04 cm} x{3.04 cm} x{1.52 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Pseudo-classess}}  \tn
% Row 0
\SetRowColor{LightBackground}
hover: & focus: & active: \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
select: & file: & print: \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
first-letter & first-line &  \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
landscape: & portrait: & dark: \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
marker: & visited: & \seqsplit{disabled:} \tn 
% Row Count 6 (+ 2)
% Row 5
\SetRowColor{white}
checked: & invalid & valid \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{required:} \tn 
% Row Count 8 (+ 1)
% Row 7
\SetRowColor{white}
\seqsplit{placeholder-shown:} & placeholder: &  \tn 
% Row Count 10 (+ 2)
% Row 8
\SetRowColor{LightBackground}
peer-in-range: & \seqsplit{peer-out-of-range:} &  \tn 
% Row Count 12 (+ 2)
% Row 9
\SetRowColor{white}
sm: & md: & lg: \tn 
% Row Count 13 (+ 1)
% Row 10
\SetRowColor{LightBackground}
xl: & 2xl: &  \tn 
% Row Count 14 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\SetRowColor{LightBackground}
\mymulticolumn{3}{x{8.4cm}}{\textless{}input \newline       type="file" \newline       class="file:mr-4 file:rounded-full file:border-5 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700" \newline     /\textgreater{} \newline  \newline {\bf{only work for file}}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Aspect Ratios}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Aspect-auto (Default based on content)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Aspect-square (1:1 square)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Aspect-video (16:9 video)} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Aspect-widescreen (21:9 ultrawide)} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Aspect-{[}4/3{]} (4:3 old TV)} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{Aspect-{[}3/2{]} (3:2 photo)} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.88 cm} x{2.88 cm} p{0.72 cm} p{0.72 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{8.4cm}}{\bf\textcolor{white}{Padding \& Margin}}  \tn
% Row 0
\SetRowColor{LightBackground}
p-{\bf{0}} (no padding) & p-8 & p-8 &  \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
pt-{\bf{1}} & pr-{\bf{5}} & pb-{\bf{2}} & pl-{\bf{2}} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
px-{\bf{1}} (padding left \& right) & py-{\bf{2}} (padding top \& bottom) &  &  \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{4}{x{8.4cm}}{m-auto (used to center element horizontally)} \tn 
% Row Count 7 (+ 1)
% Row 4
\SetRowColor{LightBackground}
-mx-{\bf{4}} & -mt-{\bf{3}} & -m-{\emph{2}} &  \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\SetRowColor{LightBackground}
\mymulticolumn{4}{x{8.4cm}}{padding use p- \newline margin use m- \newline p-auto (Invalid) \newline margin can support negative, but -m-auto (Invalid).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.448 cm} x{1.872 cm} x{1.44 cm} x{1.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{4}{x{8.4cm}}{\bf\textcolor{white}{Border \& ring}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{4}{x{8.4cm}}{border {\bf{default 1px border}}} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
border-0 & border-2 & \seqsplit{border-4} & \seqsplit{border-8} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
border-t & border-r & \seqsplit{border-b-5} & \seqsplit{border-l-2} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{4}{x{8.4cm}}{border-green-400} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
border-solid (default) & \seqsplit{border-dashed} & \seqsplit{border-dotted} & \seqsplit{border-double} \tn 
% Row Count 7 (+ 2)
% Row 5
\SetRowColor{white}
ring-{\bf{3}} & ring-{\bf{blue-400}} &  &  \tn 
% Row Count 9 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}----}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.84 cm} x{4.16 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Box shadow}}  \tn
% Row 0
\SetRowColor{LightBackground}
shadow-{\bf{xs}} & shadow-{\bf{2xl}} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4.16 cm} x{3.84 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Rounded}}  \tn
% Row 0
\SetRowColor{LightBackground}
rounded-none & rounded-sm \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
rounded & rouonded-md \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
rounded-lg & rounded-xl \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
rounded-2xl & rounded-3xl \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{rounded-full} \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
rounded-t & rounded-r \tn 
% Row Count 6 (+ 1)
% Row 6
\SetRowColor{LightBackground}
rounded-l & rounded-b \tn 
% Row Count 7 (+ 1)
% Row 7
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{-\textgreater{} {\bf{ Can add size (rounded-t-lg)}}} \tn 
% Row Count 8 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{4 cm} x{4 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Animation}}  \tn
% Row 0
\SetRowColor{LightBackground}
ease-linear & ease-in \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
ease-out & ease-in-out \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{transition-all} \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{2}{x{8.4cm}}{duration-500} \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{delay} \tn 
% Row Count 5 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{\textless{}button class="bg-blue-500 text-white px-4 py-2 rounded-lg transition-all duration-500 ease-out hover:scale-110"\textgreater{} \newline   Hover Me \newline \textless{}/button\textgreater{} \newline  \newline \textless{}div class="w-32 h-32 bg-red-500 transform translate-x-{[}-100px{]} transition-all duration-700 ease-out hover:translate-x-0"\textgreater{} \newline   Slide In \newline \textless{}/div\textgreater{} \newline  \newline \textless{}div class="opacity-100 transition-opacity duration-700 ease-out hover:opacity-0"\textgreater{} \newline   Fade Out on Hover \newline \textless{}/div\textgreater{}}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{p{3.04 cm} p{3.8 cm} p{0.76 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{3}{x{8.4cm}}{\bf\textcolor{white}{Display}}  \tn
% Row 0
\SetRowColor{LightBackground}
grid & flex &  \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}---}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (justify-content)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-end (col: right)} \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{items-end (row: bottom)} \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-start / justify-normal / items-start / (position: left)} \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{items-center (row: center)} \tn 
% Row Count 5 (+ 1)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-center (col: center)} \tn 
% Row Count 6 (+ 1)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{justify-evenly (same equal space)} \tn 
% Row Count 7 (+ 1)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-between (first item align to first, and last item align to the last. The remain space equals.} \tn 
% Row Count 10 (+ 3)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{justify-around (equal between item, half of the middle space at the first and last item)} \tn 
% Row Count 12 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{items-stretch ( stretches items vertically to fill the parent container's height (Only works if the items don't have a fixed height (h-3)} \tn 
% Row Count 15 (+ 3)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{flex-col (arrange its items vertically (column direction))} \tn 
% Row Count 17 (+ 2)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{* space-y-5 (to add place between the column {[}vertical)} \tn 
% Row Count 19 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{* space-x-5 (to add place between the column {[}horizontal{]})} \tn 
% Row Count 21 (+ 2)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{gap-{\bf{3}} (sets the space between child elements inside a flexbox, grid, or gap-supported layout.)} \tn 
% Row Count 23 (+ 2)
% Row 13
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{gap-x-3 (horizontal spacing {[}left-right{]})} \tn 
% Row Count 24 (+ 1)
% Row 14
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{gap-y-2 (vertical spacing {[}top-bottom{]})} \tn 
% Row Count 25 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}div class="flex gap-4 bg-gray-200 p-4"\textgreater{} \newline   \textless{}div class="bg-blue-500 p-4 w-1/3 h-16"\textgreater{}Item 1\textless{}/div\textgreater{} \newline   \textless{}div class="bg-red-500 p-4 w-1/3 h-16"\textgreater{}Item 2\textless{}/div\textgreater{} \newline   \textless{}div class="bg-green-500 p-4 w-1/3 h-16"\textgreater{}Item 3\textless{}/div\textgreater{} \newline \textless{}/div\textgreater{} \newline   \newline {\bf{{\emph{*must set width and height. }}}}*}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{3.44 cm} x{4.56 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (flex-wrap)}}  \tn
% Row 0
\SetRowColor{LightBackground}
flex-wrap & flex-wrap:wrap; \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
\seqsplit{flex-wrap-reverse} & \seqsplit{flex-wrap:wrap-reverse;} \tn 
% Row Count 3 (+ 2)
% Row 2
\SetRowColor{LightBackground}
flex-nowrap & flex-wrap:nowrap \tn 
% Row Count 4 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{nowrap: Every item is fit to a single line. \newline wrap: Items wrap around to additional lines. \newline wrap-reverse: Items wrap around to additional lines in reverse.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (flex-direction)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{row: Items are placed the same as the text direction. (} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{row-reverse: Items are placed opposite to the text direction. (right)} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{column: Items are placed top to bottom.} \tn 
% Row Count 5 (+ 1)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{column-reverse: Items are placed bottom to top.} \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (flex-flow)}}  \tn
\SetRowColor{LightBackground}
\mymulticolumn{1}{p{8.4cm}}{\vspace{1px}\centerline{\includegraphics[width=5.1cm]{/web/www.cheatography.com/public/uploads/helenn_1741240499_Screenshot 2025-03-06 135400.png}}} \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{The flex-flow property is a shorthand for both flex-direction and flex-wrap.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.72 cm} x{5.28 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (align-content)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\seqsplit{content-start} & align-content: flex-start; \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
content-end & align-content: flex-end; \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
\seqsplit{content-center} & align-content: center; \tn 
% Row Count 4 (+ 2)
% Row 3
\SetRowColor{white}
\seqsplit{content-between} & align-content: space-between; \tn 
% Row Count 6 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{content-around} & align-content: space-around; \tn 
% Row Count 8 (+ 2)
% Row 5
\SetRowColor{white}
\seqsplit{content-evenly} & align-content: space-evenly; \tn 
% Row Count 10 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\seqsplit{content-stretch} & align-content: stretch; \tn 
% Row Count 12 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{content-start: Rows align at the top. \newline content-end: Rows align at the bottom. \newline content-center: Rows align in the middle. \newline content-between: Rows spread evenly with space between them. \newline content-around: Rows have equal space around them. \newline content-evenly: Rows are evenly spaced in the container. \newline content-stretch: Rows stretch to fill the container height.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.56 cm} x{5.44 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (align-items)}}  \tn
% Row 0
\SetRowColor{LightBackground}
items-start & align-items:flex-start; \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
items-end & align-items:flex-end; \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
items & align-items:center; \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
\seqsplit{items-baseline} & align-items:baseline; \tn 
% Row Count 5 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\seqsplit{items-stretch} & align-items:stretch; (default) \tn 
% Row Count 7 (+ 2)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{flex-start: Items align to the top of the container. \newline flex-end: Items align to the bottom of the container. \newline center: Items align at the vertical center of the container. \newline baseline: Items display at the baseline of the container. \newline  stretch: Items are stretched to fit the container. (default)}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (order)}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{order-1} \tn 
% Row Count 1 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{Each order has a default order of 0. \newline Lower order values appear first, while higher values appear later. \newline We can use this property to also set it to a positive or negative integer value (-2, -1, 0, 1, 2).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{x{2.88 cm} x{5.12 cm} }
\SetRowColor{DarkBackground}
\mymulticolumn{2}{x{8.4cm}}{\bf\textcolor{white}{Display : flex (self)}}  \tn
% Row 0
\SetRowColor{LightBackground}
self-auto & align-self: auto; \tn 
% Row Count 1 (+ 1)
% Row 1
\SetRowColor{white}
self-start & align-self: flex-start; \tn 
% Row Count 2 (+ 1)
% Row 2
\SetRowColor{LightBackground}
self-center & align-self:center; \tn 
% Row Count 3 (+ 1)
% Row 3
\SetRowColor{white}
self-end & align-self:flex-end; \tn 
% Row Count 4 (+ 1)
% Row 4
\SetRowColor{LightBackground}
self-stretch & align-self:stretch; \tn 
% Row Count 5 (+ 1)
% Row 5
\SetRowColor{white}
self-baseline & align-self:baseline; \tn 
% Row Count 6 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\SetRowColor{LightBackground}
\mymulticolumn{2}{x{8.4cm}}{align-items affects all flex items inside the container. \newline align-self overrides align-items but only for the specific item you apply it to.}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}--}
\end{tabularx}
\par\addvspace{1.3em}

\begin{tabularx}{8.4cm}{X}
\SetRowColor{DarkBackground}
\mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Display : grid}}  \tn
% Row 0
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-start (align the entire grid to the left of the container)} \tn 
% Row Count 2 (+ 2)
% Row 1
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{justify-end (align the entire grid to the right of the container)} \tn 
% Row Count 4 (+ 2)
% Row 2
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{justify-center (center the entire grid inside its container)} \tn 
% Row Count 6 (+ 2)
% Row 3
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{justify-between (distributes items evenly inside the grid container)} \tn 
% Row Count 8 (+ 2)
% Row 4
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{grid-cols-{\bf{3}} (set column as 3) {[}grid-col-start: 2;{]}} \tn 
% Row Count 10 (+ 2)
% Row 5
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{grid-rows-{\bf{4}} (set row as 4) {[}grid-row-start: 2;{]}} \tn 
% Row Count 12 (+ 2)
% Row 6
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{col-start-{\bf{2}} / row-start-{\bf{2}} {[}grid-column-start: 2{]}  (Starts the element at column 2)} \tn 
% Row Count 14 (+ 2)
% Row 7
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{col-end-{\bf{4}} / row-end-{\bf{4}} {[}grid-row-start: 2{]}  (Ends at column 4, not including column 4 itself)} \tn 
% Row Count 16 (+ 2)
% Row 8
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{{\bf{CSS: grid-column-start:2; / grid-column-start:4;}}} \tn 
% Row Count 18 (+ 2)
% Row 9
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{col-span-{\bf{2}} (Makes the item span 2 columns instead of specifying col-end directly) {[}grid-column-end:span 2{]}} \tn 
% Row Count 21 (+ 3)
% Row 10
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{gap-{\bf{3}} (sets the space between child elements inside a flexbox, grid, or gap-supported layout.)} \tn 
% Row Count 23 (+ 2)
% Row 11
\SetRowColor{white}
\mymulticolumn{1}{x{8.4cm}}{gap-x-{\bf{3}} (horizontal spacing {[}left-right{]})} \tn 
% Row Count 24 (+ 1)
% Row 12
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{gap-y-{\bf{2}} (vertical spacing {[}top-bottom{]})} \tn 
% Row Count 25 (+ 1)
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\SetRowColor{LightBackground}
\mymulticolumn{1}{x{8.4cm}}{\textless{}div class="grid mt-5 grid-cols-2 gap-x-5  bg-gray-200 h-40 p-4 "\textgreater{} \newline   \textless{}div class="rounded-full bg-blue-500"\textgreater{}\textless{}/div\textgreater{} \newline \textless{}/div\textgreater{} \newline  \newline {\bf{{\emph{* no need set the h and w }}}}* \newline  \newline \textless{}div class="w-full bg-{[}\#e8f0f7{]} grid gap-20 mt-20 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"\textgreater{} \newline \textless{}/div\textgreater{} \newline  \newline grid-cols-1 → Defaults to 1 column on extra-small screens. \newline sm:grid-cols-2 → Changes to 2 columns on small screens (≥ 640px). \newline lg:grid-cols-3 → Changes to 3 columns on large screens (≥ 1024px).}  \tn 
\hhline{>{\arrayrulecolor{DarkBackground}}-}
\end{tabularx}
\par\addvspace{1.3em}


% That's all folks
\end{multicols*}

\end{document}