Update Tailwind CSS cheatsheet for v2+/v3+ changes

frontend/tailwind.css

@@ -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; */
+.gap-y-0   /* row-gap: 0; */
-.row-gap-1   /* row-gap: 0.25rem; */
+.gap-y-1   /* row-gap: 0.25rem; */
-.row-gap-2   /* row-gap: 0.5rem; */
+.gap-y-2   /* row-gap: 0.5rem; */
-.row-gap-3   /* row-gap: 0.75rem; */
+.gap-y-3   /* row-gap: 0.75rem; */
-.row-gap-4   /* row-gap: 1rem; */
+.gap-y-4   /* row-gap: 1rem; */
-.row-gap-5   /* row-gap: 1.25rem; */
+.gap-y-5   /* row-gap: 1.25rem; */
-.row-gap-6   /* row-gap: 1.5rem; */
+.gap-y-6   /* row-gap: 1.5rem; */
-.row-gap-8   /* row-gap: 2rem; */
+.gap-y-8   /* row-gap: 2rem; */
-.row-gap-10  /* row-gap: 2.5rem; */
+.gap-y-10  /* row-gap: 2.5rem; */
-.row-gap-12  /* row-gap: 3rem; */
+.gap-y-12  /* row-gap: 3rem; */
-.row-gap-16  /* row-gap: 4rem; */
+.gap-y-16  /* row-gap: 4rem; */
-.row-gap-20  /* row-gap: 5rem; */
+.gap-y-20  /* row-gap: 5rem; */
-.row-gap-24  /* row-gap: 6rem; */
+.gap-y-24  /* row-gap: 6rem; */
-.row-gap-32  /* row-gap: 8rem; */
+.gap-y-32  /* row-gap: 8rem; */
-.row-gap-40  /* row-gap: 10rem; */
+.gap-y-40  /* row-gap: 10rem; */
-.row-gap-48  /* row-gap: 12rem; */
+.gap-y-48  /* row-gap: 12rem; */
-.row-gap-56  /* row-gap: 14rem; */
+.gap-y-56  /* row-gap: 14rem; */
-.row-gap-64  /* row-gap: 16rem; */
+.gap-y-64  /* row-gap: 16rem; */
-.row-gap-px  /* row-gap: 1px; */
+.gap-y-px  /* row-gap: 1px; */
-.col-gap-0   /* column-gap: 0; */
+.gap-x-0   /* column-gap: 0; */
-.col-gap-1   /* column-gap: 0.25rem; */
+.gap-x-1   /* column-gap: 0.25rem; */
-.col-gap-2   /* column-gap: 0.5rem; */
+.gap-x-2   /* column-gap: 0.5rem; */
-.col-gap-3   /* column-gap: 0.75rem; */
+.gap-x-3   /* column-gap: 0.75rem; */
-.col-gap-4   /* column-gap: 1rem; */
+.gap-x-4   /* column-gap: 1rem; */
-.col-gap-5   /* column-gap: 1.25rem; */
+.gap-x-5   /* column-gap: 1.25rem; */
-.col-gap-6   /* column-gap: 1.5rem; */
+.gap-x-6   /* column-gap: 1.5rem; */
-.col-gap-8   /* column-gap: 2rem; */
+.gap-x-8   /* column-gap: 2rem; */
-.col-gap-10  /* column-gap: 2.5rem; */
+.gap-x-10  /* column-gap: 2.5rem; */
-.col-gap-12  /* column-gap: 3rem; */
+.gap-x-12  /* column-gap: 3rem; */
-.col-gap-16  /* column-gap: 4rem; */
+.gap-x-16  /* column-gap: 4rem; */
-.col-gap-20  /* column-gap: 5rem; */
+.gap-x-20  /* column-gap: 5rem; */
-.col-gap-24  /* column-gap: 6rem; */
+.gap-x-24  /* column-gap: 6rem; */
-.col-gap-32  /* column-gap: 8rem; */
+.gap-x-32  /* column-gap: 8rem; */
-.col-gap-40  /* column-gap: 10rem; */
+.gap-x-40  /* column-gap: 10rem; */
-.col-gap-48  /* column-gap: 12rem; */
+.gap-x-48  /* column-gap: 12rem; */
-.col-gap-56  /* column-gap: 14rem; */
+.gap-x-56  /* column-gap: 14rem; */
-.col-gap-64  /* column-gap: 16rem; */
+.gap-x-64  /* column-gap: 16rem; */
-.col-gap-px  /* column-gap: 1px; */
+.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: 100; */
-.font-thin       /* font-weight: 200; */
+.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
  * --------------------