Unocss

介绍

默认主题集成了

Unocss
来实现所有的样式

让我们来看几个例子来体会便利性

日间/夜间模式切换

下面的内容在日间模式下每行会展示 3 个红色卡片，而在夜间模式下每行会展示 2 个蓝色卡片，并且没有编写任何的 CSS 代码，您可以切换模式来观察效果

<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
点击展开/折叠代码

无 CSS 媒体查询

下面的内容在宽屏下会展示玫瑰色小号字体，而在窄屏幕下会展示蓝色大号字体，您可以切换窗口大小来观察结果

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
点击展开/折叠代码

纯 CSS 图标

<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
点击展开/折叠代码

还有更多

发挥你的想象力来解锁更多玩法

在 Github 上编辑此页
最后更新于： 2024/02/29 06:35:15