Skip to content

Commit d421688

Browse files
committed
add using extra variants
1 parent 54d8d3a commit d421688

File tree

3 files changed

+102
-6
lines changed

3 files changed

+102
-6
lines changed

playground/tailwind-jit/README.md

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

1112
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: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -595,6 +595,23 @@ video {
595595
display: none;
596596
}
597597

598+
.m-4 {
599+
margin: 1rem;
600+
}
601+
602+
.m-5 {
603+
margin: 1.25rem;
604+
}
605+
606+
.my-4 {
607+
margin-top: 1rem;
608+
margin-bottom: 1rem;
609+
}
610+
611+
.list-disc {
612+
list-style-type: disc;
613+
}
614+
598615
.rounded {
599616
border-radius: 0.25rem;
600617
}
@@ -658,3 +675,76 @@ video {
658675
background-color: #f2f2f2;
659676
border: 2px solid #777;
660677
}
678+
679+
.first-letter\:font-bold::first-letter {
680+
font-weight: 700;
681+
}
682+
683+
.first-letter\:text-green-500::first-letter {
684+
--tw-text-opacity: 1;
685+
color: rgba(16, 185, 129, var(--tw-text-opacity));
686+
}
687+
688+
.first-line\:font-semibold::first-line {
689+
font-weight: 600;
690+
}
691+
692+
.marker\:text-blue-600 *::marker {
693+
--tw-text-opacity: 1;
694+
color: rgba(37, 99, 235, var(--tw-text-opacity));
695+
}
696+
697+
.marker\:text-green-500 *::marker {
698+
--tw-text-opacity: 1;
699+
color: rgba(16, 185, 129, var(--tw-text-opacity));
700+
}
701+
702+
.marker\:text-blue-600::marker {
703+
--tw-text-opacity: 1;
704+
color: rgba(37, 99, 235, var(--tw-text-opacity));
705+
}
706+
707+
.marker\:text-green-500::marker {
708+
--tw-text-opacity: 1;
709+
color: rgba(16, 185, 129, var(--tw-text-opacity));
710+
}
711+
712+
.selection\:bg-pink-500 *::-moz-selection {
713+
--tw-bg-opacity: 1;
714+
background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
715+
}
716+
717+
.selection\:bg-pink-500 *::selection {
718+
--tw-bg-opacity: 1;
719+
background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
720+
}
721+
722+
.selection\:bg-purple-500 *::-moz-selection {
723+
--tw-bg-opacity: 1;
724+
background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
725+
}
726+
727+
.selection\:bg-purple-500 *::selection {
728+
--tw-bg-opacity: 1;
729+
background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
730+
}
731+
732+
.selection\:bg-pink-500::-moz-selection {
733+
--tw-bg-opacity: 1;
734+
background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
735+
}
736+
737+
.selection\:bg-pink-500::selection {
738+
--tw-bg-opacity: 1;
739+
background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
740+
}
741+
742+
.selection\:bg-purple-500::-moz-selection {
743+
--tw-bg-opacity: 1;
744+
background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
745+
}
746+
747+
.selection\:bg-purple-500::selection {
748+
--tw-bg-opacity: 1;
749+
background-color: rgba(139, 92, 246, var(--tw-bg-opacity));
750+
}

playground/tailwind-jit/index.html

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,18 @@ <h2 class="text-2xl text-gray-500 font-semibold">(Just in Time)</h2>
3333
<button class="bg-blue-600 text-white p-2 rounded">Click me</button>
3434
<button class="bg-green-500 text-white p-2 rounded">Click me</button>
3535
</div>
36-
<div>
37-
<h3>Todos:</h3>
38-
<ul>
39-
<li>Get out of bed</li>
40-
<li>Play Mario Kart</li>
41-
<li>Do some work</li>
36+
<div class="p-8">
37+
<h3 class="first-letter:font-bold first-letter:text-green-500">Todos:</h3>
38+
<ul class="my-4 list-disc marker:text-blue-600">
39+
<li class="marker:text-green-500">Get out of bed</li>
40+
<li class="selection:bg-pink-500">Play Mario Kart</li>
41+
<li class="selection:bg-purple-500">Do some work</li>
4242
</ul>
43+
<p class="first-line:font-semibold">
44+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
45+
expedita repellendus vitae quasi dolore cupiditate libero quae fugit at
46+
ipsa.
47+
</p>
4348
</div>
4449
</body>
4550
</html>

0 commit comments

Comments
 (0)