chad/awesome-cheatsheets
1
0
Fork 0
mirror of https://github.com/LeCoupa/awesome-cheatsheets.git synced 2026-04-21 08:40:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #448 from makenna-avakian/UpdateTailwindDocs

Browse Source 
Update Tailwind CSS cheatsheet for v2+/v3+ changes
This commit is contained in:
Julien Le Coupanec
2026-04-10 13:15:09 +02:00
committed by GitHub
parent 81eeb36a07 3ff3cc0cdd
commit cf532daa66
1 changed files with 71 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/tailwind.css
View File

@@ -43,11 +43,14 @@
.hidden /* display: none; */
.block /* display: block; */
.flow-root /* display: flow-root; */
.inline-block /* display: inline-block; */
.inline /* display: inline; */
.flex /* display: flex; */
.inline-flex /* display: inline-flex; */
.grid /* display: grid; */
.inline-grid /* display: inline-grid; */
.contents /* display: contents; */
.table /* display: table; */
.table-caption /* display: table-caption; */
.table-cell /* display: table-cell; */
@@ -68,7 +71,6 @@
.float-right /* float: right; */
.float-left /* float: left; */
.float-none /* float: none; */
.clearfix /* &::after { content: ""; display: table; clear: both; } */
/*
* Clear
@@ -130,8 +132,6 @@
.overflow-y-visible /* overflow-y: visible; */
.overflow-x-scroll /* overflow-x: scroll; */
.overflow-y-scroll /* overflow-y: scroll; */
.scrolling-touch /* -webkit-overflow-scrolling: touch; */
.scrolling-auto /* -webkit-overflow-scrolling: auto; */
/*
* Position
@@ -219,7 +219,7 @@
* By default, only responsive variants are generated for flex-wrap utilities.
*/
.flex-no-wrap /* flex-wrap: nowrap; */
.flex-nowrap /* flex-wrap: nowrap; */
.flex-wrap /* flex-wrap: wrap; */
.flex-wrap-reverse /* flex-wrap: wrap-reverse; */
@@ -478,44 +478,44 @@
.gap-56 /* gap: 14rem; */
.gap-64 /* gap: 16rem; */
.gap-px /* gap: 1px; */
.row-gap-0 /* row-gap: 0; */
.row-gap-1 /* row-gap: 0.25rem; */
.row-gap-2 /* row-gap: 0.5rem; */
.row-gap-3 /* row-gap: 0.75rem; */
.row-gap-4 /* row-gap: 1rem; */
.row-gap-5 /* row-gap: 1.25rem; */
.row-gap-6 /* row-gap: 1.5rem; */
.row-gap-8 /* row-gap: 2rem; */
.row-gap-10 /* row-gap: 2.5rem; */
.row-gap-12 /* row-gap: 3rem; */
.row-gap-16 /* row-gap: 4rem; */
.row-gap-20 /* row-gap: 5rem; */
.row-gap-24 /* row-gap: 6rem; */
.row-gap-32 /* row-gap: 8rem; */
.row-gap-40 /* row-gap: 10rem; */
.row-gap-48 /* row-gap: 12rem; */
.row-gap-56 /* row-gap: 14rem; */
.row-gap-64 /* row-gap: 16rem; */
.row-gap-px /* row-gap: 1px; */
.col-gap-0 /* column-gap: 0; */
.col-gap-1 /* column-gap: 0.25rem; */
.col-gap-2 /* column-gap: 0.5rem; */
.col-gap-3 /* column-gap: 0.75rem; */
.col-gap-4 /* column-gap: 1rem; */
.col-gap-5 /* column-gap: 1.25rem; */
.col-gap-6 /* column-gap: 1.5rem; */
.col-gap-8 /* column-gap: 2rem; */
.col-gap-10 /* column-gap: 2.5rem; */
.col-gap-12 /* column-gap: 3rem; */
.col-gap-16 /* column-gap: 4rem; */
.col-gap-20 /* column-gap: 5rem; */
.col-gap-24 /* column-gap: 6rem; */
.col-gap-32 /* column-gap: 8rem; */
.col-gap-40 /* column-gap: 10rem; */
.col-gap-48 /* column-gap: 12rem; */
.col-gap-56 /* column-gap: 14rem; */
.col-gap-64 /* column-gap: 16rem; */
.col-gap-px /* column-gap: 1px; */
.gap-y-0 /* row-gap: 0; */
.gap-y-1 /* row-gap: 0.25rem; */
.gap-y-2 /* row-gap: 0.5rem; */
.gap-y-3 /* row-gap: 0.75rem; */
.gap-y-4 /* row-gap: 1rem; */
.gap-y-5 /* row-gap: 1.25rem; */
.gap-y-6 /* row-gap: 1.5rem; */
.gap-y-8 /* row-gap: 2rem; */
.gap-y-10 /* row-gap: 2.5rem; */
.gap-y-12 /* row-gap: 3rem; */
.gap-y-16 /* row-gap: 4rem; */
.gap-y-20 /* row-gap: 5rem; */
.gap-y-24 /* row-gap: 6rem; */
.gap-y-32 /* row-gap: 8rem; */
.gap-y-40 /* row-gap: 10rem; */
.gap-y-48 /* row-gap: 12rem; */
.gap-y-56 /* row-gap: 14rem; */
.gap-y-64 /* row-gap: 16rem; */
.gap-y-px /* row-gap: 1px; */
.gap-x-0 /* column-gap: 0; */
.gap-x-1 /* column-gap: 0.25rem; */
.gap-x-2 /* column-gap: 0.5rem; */
.gap-x-3 /* column-gap: 0.75rem; */
.gap-x-4 /* column-gap: 1rem; */
.gap-x-5 /* column-gap: 1.25rem; */
.gap-x-6 /* column-gap: 1.5rem; */
.gap-x-8 /* column-gap: 2rem; */
.gap-x-10 /* column-gap: 2.5rem; */
.gap-x-12 /* column-gap: 3rem; */
.gap-x-16 /* column-gap: 4rem; */
.gap-x-20 /* column-gap: 5rem; */
.gap-x-24 /* column-gap: 6rem; */
.gap-x-32 /* column-gap: 8rem; */
.gap-x-40 /* column-gap: 10rem; */
.gap-x-48 /* column-gap: 12rem; */
.gap-x-56 /* column-gap: 14rem; */
.gap-x-64 /* column-gap: 16rem; */
.gap-x-px /* column-gap: 1px; */
/*
* Grid Auto Flow
@@ -1153,8 +1153,8 @@
* By default, only responsive, hover and focus variants are generated for font weight utilities.
*/
.font-hairline /* font-weight: 100; */
.font-thin /* font-weight: 200; */
.font-thin /* font-weight: 100; */
.font-extralight /* font-weight: 200; */
.font-light /* font-weight: 300; */
.font-normal /* font-weight: 400; */
.font-medium /* font-weight: 500; */
@@ -1479,7 +1479,7 @@
*/
.whitespace-normal /* white-space: normal; */
.whitespace-no-wrap /* white-space: nowrap; */
.whitespace-nowrap /* white-space: nowrap; */
.whitespace-pre /* white-space: pre; */
.whitespace-pre-line /* white-space: pre-line; */
.whitespace-pre-wrap /* white-space: pre-wrap; */
@@ -1902,7 +1902,6 @@
* By default, only responsive, hover and focus variants are generated for box shadow utilities.
*/
.shadow-xs /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
.shadow-sm /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
.shadow /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
.shadow-md /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
@@ -1910,9 +1909,34 @@
.shadow-xl /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
.shadow-2xl /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
.shadow-inner /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */
.shadow-outline /* box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); */
.shadow-none /* box-shadow: none; */
/*
* RING
* --------------------
* Utilities for creating outline rings with box-shadows.
* Replaced the old .shadow-outline utility.
*/
.ring-0 /* box-shadow: 0 0 0 0px; */
.ring-1 /* box-shadow: 0 0 0 1px; */
.ring-2 /* box-shadow: 0 0 0 2px; */
.ring-4 /* box-shadow: 0 0 0 4px; */
.ring-8 /* box-shadow: 0 0 0 8px; */
.ring /* box-shadow: 0 0 0 3px; */
.ring-inset /* --ring-inset: inset; */
.ring-transparent /* --ring-color: transparent; */
.ring-black /* --ring-color: #000; */
.ring-white /* --ring-color: #fff; */
.ring-current /* --ring-color: currentColor; */
.ring-offset-0 /* --ring-offset-width: 0px; */
.ring-offset-1 /* --ring-offset-width: 1px; */
.ring-offset-2 /* --ring-offset-width: 2px; */
.ring-offset-4 /* --ring-offset-width: 4px; */
.ring-offset-8 /* --ring-offset-width: 8px; */
/*
* OPACITY
* --------------------