add arbitrary values

Author: solygambas

playground/tailwind-jit/README.md

@@ -8,5 +8,6 @@ A quick intro to Tailwind Just in Time compiler.
 - 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).
+- adding arbitrary values in Tailwind classes.
 
 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,19 +595,15 @@ video {
   display: none;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
-.m-5 {
-  margin: 1.25rem;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -626,6 +622,15 @@ video {
   background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
 }
 
+.bg-\[\#f46225\] {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 98, 37, var(--tw-bg-opacity));
+}
+
+.bg-\[color\:var\(--primary\)\] {
+  background-color: var(--primary);
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -648,6 +653,14 @@ video {
   line-height: 2rem;
 }
 
+.text-\[24px\] {
+  font-size: 24px;
+}
+
+.text-\[length\:var\(--leadFont\)\] {
+  font-size: var(--leadFont);
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -671,11 +684,21 @@ video {
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
+.text-\[\#fff6ca\] {
+  --tw-text-opacity: 1;
+  color: rgba(255, 246, 202, var(--tw-text-opacity));
+}
+
 .testing {
   background-color: #f2f2f2;
   border: 2px solid #777;
 }
 
+:root {
+  --primary: #1eccac;
+  --leadFont: 1.2rem;
+}
+
 .first-letter\:font-bold::first-letter {
   font-weight: 700;
 }

playground/tailwind-jit/index.html

@@ -46,5 +46,29 @@ <h3 class="first-letter:font-bold first-letter:text-green-500">Todos:</h3>
         ipsa.
       </p>
     </div>
+    <div class="p-8">
+      <button class="bg-[#f46225] text-[#fff6ca] p-2 rounded">Click me</button>
+      <p class="text-[24px] mb-4">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
+        quisquam minus, voluptatem laudantium soluta maiores porro consequuntur?
+        Asperiores laboriosam deserunt nobis nulla modi. Cum fugiat praesentium
+        autem nam id totam modi odio explicabo qui? Praesentium laboriosam quasi
+        ratione ipsum. Adipisci cupiditate veritatis omnis delectus officiis,
+        ratione quae facilis nisi laboriosam.
+      </p>
+    </div>
+    <div class="p-8">
+      <button class="bg-[color:var(--primary)] text-white p-2 rounded">
+        Click me
+      </button>
+      <p class="text-[length:var(--leadFont)]">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
+        quisquam minus, voluptatem laudantium soluta maiores porro consequuntur?
+        Asperiores laboriosam deserunt nobis nulla modi. Cum fugiat praesentium
+        autem nam id totam modi odio explicabo qui? Praesentium laboriosam quasi
+        ratione ipsum. Adipisci cupiditate veritatis omnis delectus officiis,
+        ratione quae facilis nisi laboriosam.
+      </p>
+    </div>
   </body>
 </html>

playground/tailwind-jit/src/styles.css

@@ -6,3 +6,8 @@
   background-color: #f2f2f2;
   border: 2px solid #777;
 }
+
+:root {
+  --primary: #1eccac;
+  --leadFont: 1.2rem;
+}