什么是原子类（unocss、windicss、tailwindcss）
原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 有些人可能会称其为函数式 CSS，或者 CSS 实用工具。
问题列表
- 为什么要使用原子类
- 原子类有哪些好处
- 我应该何时去使用原子类
- 原子类css会不会影响我css的熟练度
- 我的vscode unocss插件为什么不生效
- 快速入门原子类，构建你的第一个原子类项目
一、为什么要使用原子类
原子类诞生已经非常久了，在现在这个追求性能和效率的时代，已经有各种造好的轮子可以使用，大幅提升效率兼顾性能，而传统css的写法效率并不高原子类兼顾性能和效率的同时，可以有效降低心智负担，把心思更好的用在逻辑上面，并且原子类几乎没有学习成本，照着文档敲着就能熟练。
二、原子类有哪些好处
- 效率，这点我就不多说了，比起传统css/scss原子类效率显著提高，高复用场景也可以使用组合去自定义类
- 性能，原子类里面的类打包的时候用到过的属性只会出现一遍，有效减少css代码冗余
- 生态，unocss除了内置的预设，还集成了很多第三方的生态，让写原子类的体验上升
- 优势，原子类降低心智负担，使得媒体查询、网格布局、动画等难度较高的css样式变得非常简单
三、我应该什么时候使用原子类
想体验新东西，不知道市面上有哪些比较好的技术的时候。在写自己的项目，对布局，样式等感到困惑，不想花太多的时间在写css上面。想快速交付项目等等等等....
四、原子类css会不会影响我的css熟练度
不会，之前什么水平无论写不写原子类都不会影响你css的水平，你css水平写之前什么样写之后还是什么样，哪怕你一直用原子类，也并不会有太多的影响
五、我的vscode unocss插件为什么不生效
windows电脑的vscode unocss插件失效，macos不清楚，降版本使用即可，在0.41.2之后的版本不知为何代码提示和代码标注都失效了，0.41.2是已知能生效的最后一个版本
快速入门原子类，构建你的第一个原子类项目
首先创建一个vite项目
npm i -g pnpm
pnpm create vite
# 输入创建的项目名称，选择vue、ts回车
cd your-project
pnpm i
pnpm add -D unocss @iconify/json
pnpm add @unocss/reset
# 安装慢的可以吧pnpm设置为某宝镜像再安装即可
pnpm config set registry https://registry.npm.taobao.org
安装完成之后
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { presetAttributify, presetUno, presetIcons } from 'unocss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
reactivityTransform: true
}),
Unocss({
presets: [
presetAttributify({
/* preset options */
}),
presetUno(),
presetIcons()
// ...custom presets
]
})
]
})
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@unocss/reset/tailwind.css'
import 'uno.css'
createApp(App).mount('#app')
现在就可以愉快的使用了
首先删了mian.ts里面的import './style.css'
// App.vue
<script setup lang="ts">
</script>
<template>
<div text-white dark:text-zinc-600 h-16 border-2 rounded-5px border-red m-auto absolute inset-0>
<div i-material-symbols:10k-outline text-4xl text-green-800></div>
</div>
</template>
<style scoped>
</style>
就可以发现原子类生效了，千万别忘记安装vscode插件，tailwindcss国外用得多，unocss antfu神说了公司也可以使用，已经比较稳定了，使用没有任何问题，已经有少部分公司在使用unocss了。
// setting.json 别忘了加这个在setting.json里面
{
"unocss.root": "packages/client"
}
tailwind只能写在calss里，但是unocss可以写在属性里，写的规范一点并不会不好维护，反而能快速定位。 unocss的文档还不全面，可以去windicss或者tailwindcss文档。
文档别看中文的，看英语版用谷歌翻译看，中文版还在2点几版本，英文的已经3点几了，谷歌翻译目前用不了的很正常，想办法用魔法攻克一下难关就行了
水平极其有限，大佬看见轻点喷，在小萌新面前手下留情
