网站后台管理系统后缀,网站哪里做,应用镜像wordpress,做1688网站到哪里找图片UnoCSS 是一个即时的原子化 CSS 引擎#xff0c;旨在灵活和可扩展。核心是不拘一格的#xff0c;所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。 一、UnoCSS 特点
完全可定制#xff1a;无核心工具#xff0c;所有功能都通过预设提供…UnoCSS 是一个即时的原子化 CSS 引擎旨在灵活和可扩展。核心是不拘一格的所有的 CSS 工具类都是通过预设提供的。再也不用为了取一个 classname 类名而烦恼了。 一、UnoCSS 特点
完全可定制无核心工具所有功能都通过预设提供即时的无解析、无抽象语法树、无扫描。它比 Windi CSS 或 Tailwind JIT 快5倍轻量级的零依赖且适用于浏览器~6kb minbrotli丰富的集成能力对Vite、Webpack、PostCSS、CLI、VS Code、ESLint等工具的一流支持快捷方式通过别名或动态分组实现工具类属性化模式在属性中对工具类进行分组纯 CSS 图标将任何图标作为单个类使用变体组使用常见前缀的组合工具类的速记方式CSS 指令使用 apply 指令在 CSS 中重用工具类编译模式在构建时将多个类合成为一个类检查器交互式检查和调试CDN 运行时构建只需一行 CDN 引入即可使用 UnoCSS
二、安装 这里以 Vue3 Vite 为例 安装 unocss
pnpm add -D unocss在 vite.config.js 中配置
// vite.config.ts
import UnoCSS from unocss/vite
import { defineConfig } from viteexport default defineConfig({plugins: [UnoCSS()]
})创建一个 uno.config.jts 配置文件
// uno.config.js
import { defineConfig } from unocssexport default defineConfig({// ...UnoCSS选项
})在 main.js 中引入
// main.jsimport { createApp } from vue
import { createPinia } from pinia
import App from /App.vue
import router from /router
import unocss/themes/solid.css// ..createApp(App).use(createPinia()).use(router).mount(#app)三、使用
1、width、height
常用值
w-0width: 0w-1width: 0.25remh-100px: height: 100pxh--10px: height: -10pxh-full: height: 100%min-w-screen: min-width: 100vw
div classmin-h-100px w-50vw/div
!--等价于--
div stylemin-height: 100px; width: 50vw;/div2、background
div classbg-#f00/div
!--等价于--
div stylebackground-color: #f00/div3、font、text-align
div classtext-center font-700 text-#f00 text-20px/div
!--等价于--
div styletext-align: center; font-weight: 700; color: #f00; font-size: 20px;/div4、border、border-radius
常用值
rounded-noneborder-radius: 0;rounded-lborder-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;rounded-full: border-radius: 9999px;border-0: border-width: 0;b-0: border-width: 0;b-1: border-width: 1px;b-b-1: border-bottom-width: 1px;b-solid: border-style: solid;b-#f00: border-color: #f00;b-rd: border-radius: 0.25rem;b-rounded: border-radius: 0.25rem;b-rd-6px: border-radius: 6px;b-rd-full: border-radius: 9999px;b-rd-50%: border-radius: 50%;
div classb-1 b-solid b-#f00 b-rd-6px/div
!--等价于--
div styleborder: 1px solid #f00; border-radius: 6px;/div5、margin、padding
常用值
m-0margin: 0;mx-0: margin-left: 0; margin-right: 0;py-10px: padding-top: 10px; padding-bottom: 10px;p-10px: padding: 10px;p--20px: padding: -20px;
div classm-10px p-10px/div
!--等价于--
div stylemargin: 10px; padding: 10px;/div6、flex
常用值
flex: display: flex;flex-wrap: flex-wrap: wrap;flex-row: flex-direction: row;flex-col: flex-direction: column;flex-justify-between: justify-content: space-between;flex-justify-center: justify-content: center;flex-items-center: align-items: center;
div classflex flex-row justify-between items-center/div
!--等价于--
div styledisplay: flex; flex-direction: row; justify-content: space-between; align-items: center;/div7、overflow
常用值
overflow-hidden: overflow: hidden;overflow-auto: overflow: auto;overflow-scroll: overflow: scroll;overflow-x-auto: overflow-x: auto;
div classmin-h-100px max-h-60vh w-100% overflow-y-scroll/div
!--等价于--
div stylemin-height: 100px; max-height: 60vh; width: 100%; overflow-y: scroll;/div8、position
常用值
absolute: position: absolute;position-absolute: position: absolute;position-fixed: position: fixed;position-relative: position: relative;left-0: left: 0;top-5px: top: 5px;z-0: z-index: 0;z-100: z-index: 100;
div classabsolute left-0 top-5px z-100/div
!--等价于--
div styleposition: absolute; left: 0; top: 5px; z-index: 100;/div9、hover、focus、active、first、last
常用值
hover-block: display: block;hover-text-pink: color: pink;
div classlast-hover-text-pink/div
!--等价于--
style.last-hover-text-pink:hover:last-child {--un-text-opacity: 1;color: rgba(244, 114, 182, var(--un-text-opacity));}
/style10、display
常用值
block: display: block;inline-block: display: inline-block;flex: display: flex;hidden: display: none;
div classflex/div
!--等价于--
div styledisplay: flex;/div11、important
div class!-text-20px/div
!--等价于--
div stylefont-size: 20px !important;/div四、总结
UnoCSS 与 TailwindCSS 类似但是它更加轻量级使用体验更好而且它的中文文档也很完善可以说是 TailwindCSS 的一个很好的替代品。 尤其是 UnoCSS 的自定义 classname 类名功能不用 [] 包裹更加直观例如
!-- 使用 TailwindCSS --
div classw-[100px] h-[20vh]/div!-- 使用 UnoCSS --
div classw-100px h-20vh/div参考文档
英文https://unocss.dev/中文https://alfred-skyblue.github.io/unocss-docs-cn/样式查询https://unocss.dev/interactive/ 欢迎访问天问博客
