Windi Analyzer
Beta
windicss-analysis@0.3.5
Preferences
Open in Editor
VS Code
VS Code Insiders
💡
This is a demo of Windi Analyzer, check out the
GitHub repo
for instructions to run it with your projects.
150
utilities and
13
colors used in
30
files
with
2.2 KB
corresponding CSS generated (min+gzip)
Top 10 Utilities
opacity-50
38
text-sm
26
subheader
14
rounded
13
my-auto
13
font-mono
12
flex
10
bg-gray-400
8
bg-opacity-5
6
container
6
Color Palette
13
All
Light
Dark
primary
3
#38bdf8
gray-400
2
#9ca3af
red-400
1
#f87171
red-600
1
#dc2626
teal-400
1
#2dd4bf
teal-600
1
#0d9488
orange-400
1
#fb923c
orange-600
1
#ea580c
green-400
1
#34d399
green-600
1
#059669
yellow-400
1
#fbbf24
yellow-600
1
#d97706
red-200
1
#fecaca
Utilities Usage
margin
29
my-auto
13
ml-1
5
mx-1
5
ml-0.5
4
mb-5
4
mb-8
4
-mx-2
3
ml-2
3
!-mx-3
3
my-2
2
mb-4
2
-mt-4
mb-6
mt-auto
mb-3
mt-1
-mt-10
mb-12
-mx-3
-mx-4
m-auto
-ml-1
mb-10
mt-9
mr-1
mx-3
mt-10
-mt-1
m-1
text
18
text-sm
26
text-xl
4
text-xs
3
text-2xl
3
hover:text-primary
2
text-primary
2
text-3xl
2
text-red-200
2
dark:text-red-400
text-red-600
dark:text-teal-400
text-teal-600
dark:text-orange-400
text-orange-600
dark:text-green-400
text-green-600
dark:text-yellow-400
text-yellow-600
padding
15
pb-2
6
p-4
5
py-1
4
px-2
4
px-4
3
py-2
2
px-3
2
pb-4
2
p-2
pl-6
pr-2
pt-2
pb-10
py-4
pt-6
background
10
bg-gray-400
8
bg-opacity-5
6
hover:bg-gray-400
2
hover:bg-opacity-10
2
bg-primary
2
bg-opacity-20
2
bg-opacity-0
hover:bg-opacity-5
bg-opacity-10
bg-transparent
position
9
top-0
4
right-0
3
absolute
3
left-0
2
bottom-0
2
relative
fixed
left-1/2
md:top-[2em]
opacity
8
opacity-50
38
hover:opacity-100
4
opacity-75
4
opacity-25
3
opacity-40
2
hover:opacity-75
2
opacity-85
opacity-20
border
8
border-b
4
border-transparent
3
hover:border-current
3
border-dashed
border-current
hover:border-solid
border
md:border
size
8
w-25
2
h-10
2
w-200
max-w-full
w-full
h-25
w-4
h-4
shortcut
6
subheader
14
container
6
bg-background
3
icon-button
2
duotone-border
2
button
gap
5
gap-y-2
3
gap-4
2
gap-x-4
2
gap-1
gap-x-2
display
4
flex
10
inline-block
4
grid
4
block
3
flex
3
flex-auto
2
flex-wrap
2
flex-col
z Index
3
z-10
z-20
z-30
border Radius
2
rounded
13
rounded-md
4
font
2
font-mono
12
italic
3
overflow
2
overflow-hidden
4
overflow-auto
outline
2
!outline-none
2
outline-none
space
2
space-x-1
2
space-y-4
text Align
2
text-center
2
text-left
transform
2
transform
-translate-x-1/2
grid
2
grid-cols-1
md:grid-cols-2
vertical Align
2
align-top
align-bottom
cursor
1
cursor-pointer
4
whitespace
1
whitespace-nowrap
3
text Overflow
1
overflow-ellipsis
3
text Transform
1
capitalize
3
user Select
1
select-none
2
box Shadow
1
shadow-xl
2
Suggested Shortcuts
1
my-auto opacity-50 text-sm
9
Files
30
shared/rules.ts
10
src/components/BackHome.vue
6
src/components/CodeBlock.vue
1
src/components/ColorPalette.vue
11
src/components/ColorView.vue
24
src/components/DarkModeSwitch.vue
3
src/components/DemoNote.vue
16
src/components/FileItem.vue
6
src/components/FileLink.vue
5
src/components/FilesList.vue
20
src/components/Footer.vue
15
src/components/GroupLabel.vue
10
src/components/GroupList.vue
11
src/components/NavBar.vue
20
src/components/OptionsSwitch.vue
16
src/components/Overview.vue
17
src/components/PreferencesButton.vue
16
src/components/PreferencesPanel.vue
6
src/components/ReloadButton.vue
5
src/components/SearchButton.vue
1
src/components/SearchModal.vue
44
src/components/TopUtilities.vue
6
src/components/UtilitiesList.vue
4
src/components/UtilitiesUsage.vue
15
src/components/UtilityLabel.vue
10
src/pages/color.vue
15
src/pages/index.vue
7
src/pages/json.vue
2
src/pages/shortcut.vue
31
src/pages/utility.vue
61
Report generated by
windicss-analysis
v0.3.5