- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
unocss
——柳永《鹤冲天》 分享一个css框架unocss 可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me
96130编辑于 2023-01-01 - 来自专栏前端Q
原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 项目中使用 unocss 参考 官方文档Vite配置，webpack 往下翻即可 ❝https://unocss.dev/integrations/vite ❞ 安装 npm install -D unocss 打包配置 vite配置 // vite.config.js import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' UnoCSS = require('@unocss/webpack').default module.exports = { plugins: [ UnoCSS(), ], optimization : { realContentHash: true, }, } webopack4中配置 // webpack.config.js const UnoCSS = require('@unocss
2.5K30编辑于 2023-09-22 - 来自专栏希里安
UnoCSS图标+Redis安装使用
--https://www.theregister.com/2023/10/10/microsoft_says_vbscript_will_be/ 使用UnoCSS图标 先看看效果： 安装 pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want] 在根目录创建uno.config.ts // uno.config.ts import { defineConfig } from 'unocss' import presetIcons from '@unocss/preset-icons' export default
46630编辑于 2023-10-30 - 来自专栏各类技术文章~
unocss，（原子化css），项目初体验
unocss 简单介绍 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。 ---- unocss 其实就是提供所有你可能需要用到的 CSS 工具。 结合Vite的按需加载的理念，unocss提供所见即所得的使用方式。并且提供插件预设进行增强，我们可以使用自定义规则进行rule校验，增加个人开发的方式。 简单上手 安装 npm i -D unocss@latest 复制代码 or yarn add -D unocss@latest 复制代码 引用 // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Unocss from 'unocss/vite' // https://vitejs.dev
6.9K00发布于 2021-11-06 - 来自专栏前端自习课
【总结】1839- 原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 项目中使用 unocss 参考 官方文档Vite配置，webpack 往下翻即可 ❝https://unocss.dev/integrations/vite ❞ 安装 npm install -D unocss 打包配置 vite配置 // vite.config.js import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' UnoCSS = require('@unocss/webpack').default module.exports = { plugins: [ UnoCSS(), ], optimization : { realContentHash: true, }, } webopack4中配置 // webpack.config.js const UnoCSS = require('@unocss
2K10编辑于 2023-10-24 - 来自专栏希里安
vue3+ts+vite+UnoCSS系列（二）
使用 安装： pnpm add -D unocss 安装插件： // vite.config.ts import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ UnoCSS(), ], }) 创建一个uno.config.ts // uno.config.ts import { defineConfig } from 'unocss' export default defineConfig({ // ...UnoCSS options }) 添加 virtual:uno.css 到你的 main 入口: // main.ts import 'virtual:uno.css' 就可以愉快的使用UnoCSS了，可以在沙盒中试用： https ://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/vite-vue3
53020编辑于 2023-10-30 - 来自专栏全栈开发工程师
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎 一、概述 1、简介 UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架，旨在提供简洁、灵活且高效的样式开发体验。 2、官网 官网 https://unocss.dev/ 文档 https://unocss.dev/integrations/vite 交互搜索 https://unocss.dev/interactive / 二、基本使用 1、安装 pnpm add -D unocss 2、修改 vite.config.ts // vite.config.ts import UnoCSS from 'unocss/vite /presets/ Package Description @unocss/preset-uno 默认预设 @unocss/preset-mini 精简但必要的规则和变体 @unocss/preset-wind @unocss/preset-icons 由 Iconify 提供支持的纯 CSS 图标解决方案 @unocss/preset-web-fonts 网页字体支持（Google Fonts 等） @unocss
45410编辑于 2025-01-06 UnoCSS即时按需引用的原子css引擎
什么是unocss？很多前端可能第一次听说这个词unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 ❞使用场景和示例UnoCSS适用于快速开发和原型设计，特别适合需要快速迭代和灵活样式的项目。 unocss的优点它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。它可以让你的CSS文件更小，因为它只生成你用到的工具类。它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 unocss中文文档：https://www.unocss.com.cn
55110编辑于 2025-04-23- 来自专栏前端框架
UnoCSS原子CSS引擎-新一代前端原子化框架
UnoCSS是一款原子化的即时按需 CSS 引擎，其中没有核心实用程序，所有功能都是通过预设提供的。默认情况下UnoCSS应用通过预设来实现相关功能。 UnoCSS中文文档：https://www.unocss.com.cn前有很多种原子化的框架，例如 Tailwind CSS，Windi CSS 以及 Tachyons 等。为什么要原子化 CSS？ 我们需要用到一些 Sass 内置的一些颜色处理函数，例如 mix、adjust-hue、change-color、scale-color、desaturate、transparentize等等总结感受：在使用 UnoCSS
60300编辑于 2025-07-14 - 来自专栏四楼没电梯
CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？
然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 : 按需生成的原子化 CSS 引擎 UnoCSS 并非一个“框架”，而是一个原子化 CSS 引擎。 任意值支持：这是 UnoCSS 的一大杀手锏。你不再受限于配置文件，可以直接在类名中书写任意值。 代码实例：同样的卡片，更灵活的写法 使用 UnoCSS，你可以实现和 Tailwind 完全相同的效果。注意，如果你使用了 @unocss/preset-wind 预设，语法几乎一模一样。 如果你追求极致的开发体验和性能，那么 UnoCSS 绝对值得一试。它可能会彻底改变你对 CSS 工具的看法。
3.2K10编辑于 2025-06-10 - 来自专栏前端食堂
前端食堂技术周刊第 35 期：Vitest 、Jest 28、Ant Design v4.20.0、Lerna 官宣停止维护
B 站【前端食堂】同步发送，想看视频的堂友可以先去看视频 本期摘要 Vitest v0.10.0 Jest 28 Ant Design v4.20.0 Chrome 101 Lerna 官宣停止维护 UnoCSS UnoCSS 交互式文档上线[6] 如果你还不知道 UnoCSS，可以通过下面这篇文章了解。 重新构想原子化 CSS[7] 下面我们来看技术资料。 github.com/ant-design/ant-design/releases/tag/4.20.0 [5] Lerna 官宣停止维护: https://github.com/lerna/lerna [6] UnoCSS
1.8K20编辑于 2022-05-25 JeecgUniapp全新版本3.0发布，采用uniapp+vue3最新架构
：Vscode、HBuilderX、Intellij IDEA最新技术栈：Uniapp + Vue3.0 + Vite + TypeScript + Wot-design-uni + pinia + unocss 构建工具 Webpack Vite，构建更快 Unocss 原子化 不支持 支持 Unocss 原子化 TypeScript 支持 不支持 支持 TS，提供类型提示
49510编辑于 2025-03-10- 来自专栏前端实验室
强烈推荐一个极简风格的后台管理模板！
Vue Naive Admin 2.0 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm 特性 使用 Vue3 主流最新技术栈: Vite + Vue3 + Pinia 使用 原子CSS框架: Unocss，优雅、轻量、易用 集成 Pinia 状态管理，支持状态持久化 使用主流的 iconify + unocss 图标方案，支持自定义图标，支持动态渲染 使用 Naive UI，极致简洁的代码风格和清爽的页面设计，审美在线，主题轻松定制 先进且易于理解的文件结构设计，多个模块之间零耦合，单个业务模块删除不影响其他模块
1.4K10编辑于 2024-01-26 XM外汇平台官网：VitePress 允许你通过自定义 Layout 来改变页面的结构和样式
在查阅 VitePress 具体实践时，我被 UnoCSS 文档中的彩虹动画效果深深吸引。 在项目中安装 UnoCSS 插件：pnpm add -D unocss1然后，在 vite.config.ts 中配置 UnoCSS 插件：import UnoCSS from 'unocss/vite'import { defineConfig } from 'vite'export default defineConfig({ plugins: [UnoCSS()],}通过 UnoCSS，可以轻松应用样式而无需写冗余
65910编辑于 2025-05-29- 来自专栏JVMGC
6.3K Star开源一个管理后台模板,好看的不行
它采用了最新的前端技术栈，包括 Vue3、Vite5、TypeScript、Pinia 和 UnoCSS。该模板内置了丰富的主题配置和组件，代码规范严谨，同时实现了自动化的文件路由系统。 功能特点： 1.前沿技术应用：采用最新流行的技术栈，如 Vue3、Vite5、TypeScript、Pinia 和 UnoCSS，使得项目具备现代化的特性。 5.丰富的主题配置：内置多样化的主题配置，与 UnoCSS 完美结合，使得界面样式能够满足不同用户的需求。 6.内置国际化方案：轻松实现多语言支持，使得软件能够应对不同语言的用户需求。
58210编辑于 2024-01-29 - 来自专栏前端实验室
快看！如此清新优雅的后台管理系统你见过吗？
说她清新优雅也毫不过分，她就是——soybean-admin soybean-admin Soybean Admin 是一个基于 Vue3、Vite、TypeScript、NaiveUI、Pinia 和 UnoCSS vite2 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm TypeScript: 应用程序级 JavaScript 的语言 主题：丰富可配置的主题、暗黑模式，基于原子 css 框架 - UnoCss
87840编辑于 2023-05-23 - 来自专栏不知非攻
研究三天，我找到了 tailwindcss 的正确打开姿势
结果不讨论还好，一讨论大家的兴致都特别高，有吹爆 tailwindcss 的，也有对它不屑一顾的，还有觉得 unocss 更好用的... 我结合群友的使用经验，又整合了一些以前封装组件的使用思路，并且借鉴了 unocss 的语法，摸索出了一套使用简洁的最佳实践分享给大家 一、最显眼的那个痛点可能并不存在 二、无 CSS 是准确方向 三、封装思维的小转变 这个思路从 unocss 的传参方式中获得了灵感。例如我们要封装一个 Button 组件。 也有许多朋友在群里问我为啥不使用 unocss，因为有的群友认为 unocss 用起来更简洁更爽，实际上我主要是看着 tailwindcss 提供的 UI 设计要漂亮很多才选择的它，并没有做太细节的权衡 ，unocss 我目前只停留在片面的了解程度，并且也暂时不打算深入学习使用它，未来考虑在下一个项目使用 unocss，等我有一点新心得之后再来详细比较他们的差异。
4.5K20编辑于 2024-06-07 - 来自专栏趣谈前端
开源推荐! yite-cli, 基于vite的开箱即用的项目脚手架
项目架构 yite-cli @unocss/transformer-compile-class @unocss/transformer-directives @unocss/transformer-variant-group copy-anything fast-glob fs-extra lodash-es merge-anything portfinder rollup-plugin-visualizer tiny-cookie unocss
79520编辑于 2023-09-18 - 来自专栏低代码平台
JeecgBoot Vue3前端项目性能优化&按需加载方案
note.youdao.com/s/YKUzG66Hjeecgboot 3.5.5 性能优化方案如何你是jeecgboot 3.5.5 之前的VUE3版本，可以参考我们已做过的优化进行改造1、按需加载改造2、UnoCSS 替代windicss3、升级vite44、build打包拆分PR提交首屏缩短至10秒多&打包时间缩短至一半，升级vite4和vue3.3打包优化默认index太大，自定义拆包策略UnoCSS替代windicss
63910编辑于 2024-03-11 - 来自专栏开源服务指南
高效 UI 组件，节省开发时间 | 开源专题 No.70
unocss/unocsshttps://github.com/unocss/unocss Stars: 14.6k License: MIT 该项目是一个即时的按需原子 CSS 引擎，受到 Windi
79910编辑于 2024-04-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号