在CSS这块有时是按需手写的，效率不算高，毕竟需求低嘛。流行的LESS 、SASS 都没用过，真没太多时间花在这方面。这次，为了做AI应用，还是需要补一下这方面的技能。
在UI方面选了NaiveUI, CSS方面则有个挺时髦的解决方案：Tailwind CSS。它做了一件蛮有用的更新：就是将CSS语句原子化！ 我们听过数据库原子化，CSS语句原子化是个啥？
CSS原子化其实就是简化CSS语句，比如这样：padding-bottom: 1rem; -> pb-1, 这样的转换后，就可以直接在<div>中使用了，比如这样的语句：<div bg-pink-200 text-cyan>我的国家</div>
用了一段时间的Tailwind CSS， 发现它有个很死板的规定：有些数字是不能使用的！比如： pb-4是合法语句，但pb-5却非法！这是什么鬼？！ 还有些其它奇葩的规定，累觉不爱。
后来转到了Unocss，发现Unocss是个新鲜、有活力的项目。Unocss兼具了TailwindCSS 和 Windicss的优点，同时还具有自身的定制性和灵活性。按需引入，体积小，速度快。用着用着，很快就爱上了。用了一段时间，也总结了一些方法。
使用方法
- 直接在 div 中使用
<div class="bg-blue-200"> Index Page</div>
<div bg-pink-200 text-cyan>我的国家</div>
- 在style中定义
<div class="text"> Index Page</div>
<style>
.text {
@apply text-xs text-red-300 hover:bg-zinc-900;
}
.btn {
@apply text-red-700 border border-red-500 !rounded-full; // rounded-full !important
}
</style>
- 混合的写法也是可以的
.test {
color: white;
font-size: 2rem;
@apply bg-blue;
}
常用语法
bg-purple-100 背景颜色
text-purple-100 文本颜色
text-center 水平对齐 可用于字体和按键的中心对齐
align-middle 垂直对齐
!w-[80%] //width: 80% !important;
shadow-sm 盒子阴影
cursor-pointer 指针样式
outline-none 无边框
font-italic 斜体
hover:bg-purple-500 鼠标悬停时
focus:bg-purple-900 鼠标点击时
flex justify-center items-center 元素居中
flex justify-between 两端对齐
min-h-sceen / min-h-100vh 高度满屏
min-h-80vh 最小高度（可以延伸）
h-80vh / calc(100vh - 10px)
w-full / w-100vw 宽度满屏
w-[95%] lg:w-[85%] ~= w-95vw lg:w-85vw
m-auto / mx-auto 居中
ml-auto 右对齐
mr-auto 左对齐
px-4 / py-4 左右/上下两边内边距（padding: 1rem;） 其它写法：px-[20px]
pt-4 上部内边距1rem(padding-top: 1rem;)
mx-4 / my-4 左右/上下两边外边距
animate-fade-in 渐入
<div border-t-dashed border-1></div> 虚线分割线
/* flex布局，两端对齐 */
<div flex mb-2 justify-between>
<p mr-2>自定义角色</p>
<div w-65vw lg:w-42vw> xxx </div>
</div>
/* 响应式 */
根据常用的设备分辨率方案，默认内置了 5 个断点，sm、md、lg、xl、2xl ：
断点前缀 最小宽度 CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
/* 定位手机屏幕 */
这种方式最令人们惊讶的地方是，要为移动设备设计样式，您需要使用无前缀的功能类，而不是带 sm: 前缀的版本。不要将 sm: 理解为”在小屏幕上”，而应将其视为”在小断点处”
请注意，我们不必为 sm 断点或 xl 断点指定背景色，您只需要指定一个功能类何时开始生效，而不是何时结束。
使用无前缀的功能类来定位移动设备，并在较大的断点处覆盖它们，下面是一些案例：
<div class="text-center sm:text-left"></div> //在手机端居中，在屏幕变大时靠左
flex-1 flex justify-end lg:hidden //手机端时显示，屏幕变大时隐藏
relative hidden lg:flex items-center ml-auto //在电脑端的样式（在手机端时隐藏）
hidden lg:flex items-center px-4 //在电脑端的样式（在手机端时隐藏）
hidden lg:block ml-auto //在电脑端的样式（在手机端时隐藏）
ml-auto lg:hidden//在手机端时居中，电脑端隐藏
Unocss做了精简后的语法，在开发时确实可以加快速度。在所见即所得方面更是友好，一改就有，在前端方面真是不可多得的利器。其实日常最常用的估计也就20来条语句，有些不知道，仍然可以用回CSS。有包容性的工具真心不错。