add using extra variants

Author: solygambas

playground/tailwind-jit/README.md

@@ -7,5 +7,6 @@ A quick intro to Tailwind Just in Time compiler.
 - setting up Tailwind CSS with npx commands.
 - generating on-demand CSS during development with --JIT, --purge and --watch flags.
 - creating a custom tailwind.config.js file.
+- using extra variants introduced in [Tailwind CSS 2.2](https://blog.tailwindcss.com/tailwindcss-2-2).
 
 Based on [Tailwind Just in Time Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9ht1OMQPhBVKAb2dVLhg-MJ) by Shaun Pelling - The Net Ninja (2021).

playground/tailwind-jit/build/styles.css

@@ -595,6 +595,23 @@ video {
   display: none;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
+.m-5 {
+  margin: 1.25rem;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -658,3 +675,76 @@ video {
   background-color: #f2f2f2;
   border: 2px solid #777;
 }
+
+.first-letter\:font-bold::first-letter {
+  font-weight: 700;
+}
+
+.first-letter\:text-green-500::first-letter {
+  --tw-text-opacity: 1;
+  color: rgba(16, 185, 129, var(--tw-text-opacity));
+}
+
+.first-line\:font-semibold::first-line {
+  font-weight: 600;
+}
+
+.marker\:text-blue-600 *::marker {
+  --tw-text-opacity: 1;
+  color: rgba(37, 99, 235, var(--tw-text-opacity));
+}
+
+.marker\:text-green-500 *::marker {
+  --tw-text-opacity: 1;
+  color: rgba(16, 185, 129, var(--tw-text-opacity));
+}
+
+.marker\:text-blue-600::marker {
+  --tw-text-opacity: 1;
+  color: rgba(37, 99, 235, var(--tw-text-opacity));
+}
+
+.marker\:text-green-500::marker {
+  --tw-text-opacity: 1;
+  color: rgba(16, 185, 129, var(--tw-text-opacity));
+}
+
+.selection\:bg-pink-500 *::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+}
+
+.selection\:bg-pink-500 *::selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+}
+
+.selection\:bg-purple-500 *::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
+}
+
+.selection\:bg-purple-500 *::selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
+}
+
+.selection\:bg-pink-500::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+}
+
+.selection\:bg-pink-500::selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+}
+
+.selection\:bg-purple-500::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
+}
+
+.selection\:bg-purple-500::selection {
+  --tw-bg-opacity: 1;
+  background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
+}

playground/tailwind-jit/index.html

@@ -33,13 +33,18 @@ <h2 class="text-2xl text-gray-500 font-semibold">(Just in Time)</h2>
       <button class="bg-blue-600 text-white p-2 rounded">Click me</button>
       <button class="bg-green-500 text-white p-2 rounded">Click me</button>
     </div>
-    <div>
-      <h3>Todos:</h3>
-      <ul>
-        <li>Get out of bed</li>
-        <li>Play Mario Kart</li>
-        <li>Do some work</li>
+    <div class="p-8">
+      <h3 class="first-letter:font-bold first-letter:text-green-500">Todos:</h3>
+      <ul class="my-4 list-disc marker:text-blue-600">
+        <li class="marker:text-green-500">Get out of bed</li>
+        <li class="selection:bg-pink-500">Play Mario Kart</li>
+        <li class="selection:bg-purple-500">Do some work</li>
       </ul>
+      <p class="first-line:font-semibold">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
+        expedita repellendus vitae quasi dolore cupiditate libero quae fugit at
+        ipsa.
+      </p>
     </div>
   </body>
 </html>