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!

Suggest changes to this page
Last update at: 2024/03/22 12:10:31