Skip to content

Commit 48a33d7

Browse files
committed
add arbitrary values
1 parent d421688 commit 48a33d7

File tree

4 files changed

+61
-8
lines changed

4 files changed

+61
-8
lines changed

playground/tailwind-jit/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ A quick intro to Tailwind Just in Time compiler.
88
- generating on-demand CSS during development with --JIT, --purge and --watch flags.
99
- creating a custom tailwind.config.js file.
1010
- using extra variants introduced in [Tailwind CSS 2.2](https://blog.tailwindcss.com/tailwindcss-2-2).
11+
- adding arbitrary values in Tailwind classes.
1112

1213
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

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -595,19 +595,15 @@ video {
595595
display: none;
596596
}
597597

598-
.m-4 {
599-
margin: 1rem;
600-
}
601-
602-
.m-5 {
603-
margin: 1.25rem;
604-
}
605-
606598
.my-4 {
607599
margin-top: 1rem;
608600
margin-bottom: 1rem;
609601
}
610602

603+
.mb-4 {
604+
margin-bottom: 1rem;
605+
}
606+
611607
.list-disc {
612608
list-style-type: disc;
613609
}
@@ -626,6 +622,15 @@ video {
626622
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
627623
}
628624

625+
.bg-\[\#f46225\] {
626+
--tw-bg-opacity: 1;
627+
background-color: rgba(244, 98, 37, var(--tw-bg-opacity));
628+
}
629+
630+
.bg-\[color\:var\(--primary\)\] {
631+
background-color: var(--primary);
632+
}
633+
629634
.p-8 {
630635
padding: 2rem;
631636
}
@@ -648,6 +653,14 @@ video {
648653
line-height: 2rem;
649654
}
650655

656+
.text-\[24px\] {
657+
font-size: 24px;
658+
}
659+
660+
.text-\[length\:var\(--leadFont\)\] {
661+
font-size: var(--leadFont);
662+
}
663+
651664
.font-bold {
652665
font-weight: 700;
653666
}
@@ -671,11 +684,21 @@ video {
671684
color: rgba(255, 255, 255, var(--tw-text-opacity));
672685
}
673686

687+
.text-\[\#fff6ca\] {
688+
--tw-text-opacity: 1;
689+
color: rgba(255, 246, 202, var(--tw-text-opacity));
690+
}
691+
674692
.testing {
675693
background-color: #f2f2f2;
676694
border: 2px solid #777;
677695
}
678696

697+
:root {
698+
--primary: #1eccac;
699+
--leadFont: 1.2rem;
700+
}
701+
679702
.first-letter\:font-bold::first-letter {
680703
font-weight: 700;
681704
}

playground/tailwind-jit/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,29 @@ <h3 class="first-letter:font-bold first-letter:text-green-500">Todos:</h3>
4646
ipsa.
4747
</p>
4848
</div>
49+
<div class="p-8">
50+
<button class="bg-[#f46225] text-[#fff6ca] p-2 rounded">Click me</button>
51+
<p class="text-[24px] mb-4">
52+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
53+
quisquam minus, voluptatem laudantium soluta maiores porro consequuntur?
54+
Asperiores laboriosam deserunt nobis nulla modi. Cum fugiat praesentium
55+
autem nam id totam modi odio explicabo qui? Praesentium laboriosam quasi
56+
ratione ipsum. Adipisci cupiditate veritatis omnis delectus officiis,
57+
ratione quae facilis nisi laboriosam.
58+
</p>
59+
</div>
60+
<div class="p-8">
61+
<button class="bg-[color:var(--primary)] text-white p-2 rounded">
62+
Click me
63+
</button>
64+
<p class="text-[length:var(--leadFont)]">
65+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
66+
quisquam minus, voluptatem laudantium soluta maiores porro consequuntur?
67+
Asperiores laboriosam deserunt nobis nulla modi. Cum fugiat praesentium
68+
autem nam id totam modi odio explicabo qui? Praesentium laboriosam quasi
69+
ratione ipsum. Adipisci cupiditate veritatis omnis delectus officiis,
70+
ratione quae facilis nisi laboriosam.
71+
</p>
72+
</div>
4973
</body>
5074
</html>

playground/tailwind-jit/src/styles.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,8 @@
66
background-color: #f2f2f2;
77
border: 2px solid #777;
88
}
9+
10+
:root {
11+
--primary: #1eccac;
12+
--leadFont: 1.2rem;
13+
}

0 commit comments

Comments
 (0)