Tailwind Classname Parser

INPUT (20 classes)
#1
bg-red-500/(--eee,--asdf,___var_(--a-123,__ar(--b)),_var(--c_a)])
utility:
bg
Default
red-500
/(--eee,--asdf,___var_(--a-123,__ar(--b)),_var(--c_a)])
Potential Css Variables Used:
#2
not-not-group-peer-has-not-in-data-asdf:[&.is-dragging]:group-has-[a]:bg-red-500/123
variants:
not-
not-
group-
peer-
has-
not-
in-
data-asdf
[&.is-dragging]
Full Arbitrary
group-
has-[a]
utility:
bg
Default
red-500
/123
Potential Css Variables Used:
#3
group-data-[hello]/edit
utility:
group-data-[hello]
Custom
/edit
Potential Css Variables Used:
#4
dark:md:hover:bg-fuchsia-600
variants:
dark
md
hover
utility:
bg
Default
fuchsia-600
Potential Css Variables Used:
#5
group-hover/edit:translate-x-0.5
variants:
group-
hover
/edit
utility:
translate-x
Default
0.5
Arbitrary
Potential Css Variables Used:
#6
group-hover/edit:text-gray-500
variants:
group-
hover
/edit
utility:
text
Default
gray-500
Potential Css Variables Used:
#7
group-[:nth-of-type(3)_&]:block
variants:
group-[:nth-of-type(3)_&]
utility:
block
Custom
Potential Css Variables Used:
#8
peer-checked/published:block
variants:
peer-
checked
/published
utility:
block
Custom
Potential Css Variables Used:
#9
after:content-['*']
variants:
after
Custom
utility:
content
Default
['*']
Arbitrary
Potential Css Variables Used:
#10
*:border-sky-100
variants:
*
utility:
border
Default
sky-100
Potential Css Variables Used:
#11
[&.is-dragging]:active:cursor-grabbing
variants:
[&.is-dragging]
Full Arbitrary
active
utility:
cursor
Default
Potential Css Variables Used:
#12
nth-3:mx-6
variants:
nth-3
utility:
mx
Default
6
Arbitrary
Potential Css Variables Used:
#13
nth-[3n+1]:mx-7
variants:
nth-[3n+1]
utility:
mx
Default
7
Arbitrary
Potential Css Variables Used:
#14
nth-last-of-type-6:underline
variants:
nth-last-of-type-6
utility:
underline
Custom
Potential Css Variables Used:
#15
dark:odd:bg-gray-900/50
variants:
dark
odd
utility:
bg
Default
gray-900
/50
Potential Css Variables Used:
#16
dark:even:bg-gray-950
variants:
dark
even
utility:
bg
Default
gray-950
Potential Css Variables Used:
#17
dark:has-checked:ring-indigo-900
variants:
dark
has-
checked
utility:
ring
Default
indigo-900
Potential Css Variables Used:
#18
group-has-[a]:block
variants:
group-
has-[a]
utility:
block
Custom
Potential Css Variables Used:
#19
peer-has-checked:hidden
variants:
peer-
has-
checked
utility:
Default
Potential Css Variables Used:
#20
hover:not-focus:bg-indigo-700
variants:
hover
not-
focus
utility:
bg
Default
indigo-700
Potential Css Variables Used: