关于在组件 demo 中编写样式的指南

组件的中英文md文档中，禁止写自定义样式<style>，因为里面写的样式是全局样式，很容易污染其他组件，造成影响面很大的全局样式问题。

如果你需要在demo的html元素中编写样式，请直接使用packages/devui-vue/docs/.vitepress/devui-theme/styles/base.scss文件中已经定义好的原子样式。

如果不满足你的要求，可以遵循tailwind命名规范，自己按需增加。

base.scss样式简明指南

间距padding/margin的使用

一共有4个方向：

t: top
r: right
b: bottom
l: left

7种尺寸：

xxs: 4px
xs: 8px
s: 12px
m: 16px
l: 20px
xl: 24px
xxl: 32px

怎么使用呢？

举个例子：

我想设置一个元素的margin-right: 8px，那么可以这样编写：

<div class="mr-xs"></div>

mr-xs中-：

• 中划线左侧的mr代表margin-right
• 右侧的xs对应的是尺寸表中的xs: 8px

其他的间距也是一样的。

如果是left/right/top/bottom，比如想设置position: absolute; left: 16px;，那么可以这样写：

<div class="absolute left-m"></div>