Unocss
Introduction
The default theme use the Unocss to implement all styles
Let's have some examples to see the benefits:
Easily dark mode
The following content would show 3 red cards per line in light mode.
And 2 blue cards per line in dark mode.
Isn't this great with few codes?
<div class="grid grid-cols-3 gap-4 dark:grid-cols-2">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<style>
.card {
--at-apply: h-[100px] flex items-center justify-center
rounded bg-rose-5 dark:bg-blue-5;
}
</style>
svelte
Click fold/expand code
Easily multi screen compatible
Toggle the window size or use different device to ses what's happening
This is a text with different font size and color in wide or narrow width device
<div class="sm:text-5 sm:text-rose-5 text-blue-5 text-10">
This is a text with different font size and color in wide or narrow width device
</div>
svelte
Click fold/expand code
Easily pure css icons
<div class="text-[56px]">
<div class="i-openmoji-red-apple"></div>
<div class="i-openmoji-banana"></div>
<div class="i-openmoji-grapes"></div>
</div>
svelte
Click fold/expand code
And more...
Use your talents, ideas to achieve more!