- 综合排序
- 最热优先
- 最新优先
- 来自专栏daidr
SCSS+WindiCSS实现主题色切换
不妨先从自定义颜色入手 WindiCSS 自定义颜色 定义一个固定的颜色 // windi.config.js export default defineConfig({ theme: { #6ebbf7", DEFAULT: "#2196f3" }, }, }, }, }) 使用CSS变量 为了使颜色可变，使用 CSS 变量会方便许多，WindiCSS color-primary)', dark: 'var(--color-primary-dark)', }, }, }, }, }) 这样就能够基本实现在 WindiCSS 中使用 CSS 变量了，不过还有一个小问题： WindiCSS 支持为颜色设置透明度，例如 bg-gray-800/80 bg-gray-800 bg-opacity-80 这两种写法。 withOpacityValue('--color-primary-dark'), }, }, }, }, }) 如此一来，每当使用 primary 颜色时，WindiCSS
1.8K20编辑于 2023-04-27 - 来自专栏耕耘实录
Vue3 Element Plus WindiCSS 项目开发环境搭建
el-button> <el-button type="danger" plain disabled>Danger</el-button> </el-row> </template> 2.5 安装 WindiCSS Windi CSS 中文文档：https://cn.windicss.org，安装 Windi CSS： npm i -D vite-plugin-windicss windicss 在你的 Vite 配置中添加插件： import WindiCSS from 'vite-plugin-windicss' // 不能忘记 export default { plugins: [ vue( ), WindiCSS() ], } main.js 引入： import 'virtual:windi.css' 在 vscode 安装插件：WindiCSS IntelliSense。
74810编辑于 2023-12-18 - 来自专栏daidr
在 Nuxt.js 中配合 windicss 实现暗黑模式适配
在 windicss 中，提供了媒体查询和 class 两种方式实现暗黑模式适配。 为了方便控制，我们选择使用 class 的方式来切换暗黑模式（即给根元素赋予类名 dark 来切换到暗黑模式） 基础样式 首先，需要一些全局 css 来解决 windicss 无法覆盖的样式。 应用一个 filter 就好了 html.dark img { filter: brightness(0.8); } 自动检测 接下来就是重头戏了，如何判断并给html元素加上dark类名，毕竟windicss
1.9K20编辑于 2023-03-11 - 来自专栏采云轩
小而美的 css 的原子化
itemName=voorjaar.windicss-intellisense )，对于日常使用有很大的帮助，用起来的体验也很好。 刚开始的时候对应功能的类名不熟悉，需要使用官网( https://windicss.org/guide/ )查询。 虽然这提供属性化（https://windicss.org/features/attributify.html）的模式，Shortcuts（https://windicss.org/features/shortcuts.html 你会发现 windicss (https://cn.windicss.org/posts/v30-utilities.html) 这类工具优先的css框架，也是添加蛮多额外的功能来弥补原子化 CSS 框架的缺陷 (https://github.com/windicss/windicss) tailwindcss (https://github.com/tailwindlabs/tailwindcss)
1.1K40编辑于 2022-12-01 - 来自专栏前端二次元
在Vite中接入现代化的CSS 工程化方案
我个人比较喜欢 Windi CSS 本身的attributify、shortcuts等独有的特性，因此首先从 windicss 开始说起。1. Windi CSS 接入首先安装 windicss 及对应的 Vite 插件:pnpm i windicss vite-plugin-windicss -D随后我们在配置文件中来使用它:// vite.config.tsimport windi from "vite-plugin-windicss";export default { plugins: [ // 省略其它插件 windi() ]}接着要注意在src/ 要开启这两个功能，我们需要在项目根目录新建windi.config.ts，配置如下:import { defineConfig } from "vite-plugin-windicss";export 不过使用attributify的时候需要注意类型问题，你需要添加types/shim.d.ts来增加类型声明，以防类型报错:import { AttributifyAttributes } from 'windicss
2.2K51编辑于 2023-11-12 - 来自专栏低代码平台
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,Windi
62010编辑于 2024-03-11 - 来自专栏秃头开发头秃了
我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss】
但是学习还是有必要的，那么学习后就需要一个成熟的项目，体系完整的项目来巩固一下自己学的知识，借此机会，向部门CTO提出使用Vue3 + TS + Vite + Pinia + Windicss + NavieUI 但是之前都是自己去弄，这次因为比较着急，而且工作内容比较多，所以必须得拉上小伙伴一起了，就面临了一个问题，那就是如何统一设计风格的问题，于是想到了tailwindcss，调研的过程中，又发现了windicss ，相对于前者，后者的体积更小，但是文档不太友好，因为...你完全可以参照前者的文档，而是用后者进行开发，哈哈，使用windicss&NavieUI统一好theme，给伙伴们的要求是，不要在工程中自己写css
84440编辑于 2022-10-26 - 来自专栏WflynnWeb
新型前端构建工具 Vitejs 开发使用
它预装了多种内置功能和插件，例如： WindiCSS 作为 UI 框架和 WindiCSS 排版 。 Iconify 允许你使用网络上多个图标库的图标。 VS Code 扩展系列 (例如 Vite 的 dev server 、 i18n ally 、 WindiCSS 、 Iconify Intellisense 等)，如果你是 VS Code 用户，这是很好的选择
1.5K30编辑于 2022-10-28 - 来自专栏Article
NuxtJs 3.x 实战记录
post_type=post&p=2104 欢迎分享与聚合，尊重版权，可以联系授权 WindiCSS 如果使用 windi.config.ts 配置文件，nuxt.config.ts 中就不要填写配置
37730编辑于 2022-11-12 - 来自专栏前端魔法指南
从文档开发框架到package.json，带你走一轮React组件库构建与发布
所以我对比tailwindcss和windicss后选择了tailwindcss 一方面，经过调研，常规认知中tailwindcss的卡顿特性，随着“JIT”模式的推出，已经消失得一干二净。 另一方面，调研发现，windicss实现的技术是所谓的virtual包，虚拟npm包。 github.com/umijs/umi/issues/7303） 而且即便通过webpack集成进去，我们也会发现，由于father2和father4.rc并不是很支持配置webpack插件，在此基础上，配置windicss
4.5K20编辑于 2022-09-21 - 来自专栏希里安
vue项目系列（三）
console.log('密码:', this.password); // 在此添加实际的登录逻辑 }, }, }); </script> <style> /* 在这里添加 WindiCSS
26210编辑于 2023-10-30 - 来自专栏daidr
写一个炫酷的个人名片页✨✨
现在重制也基本上完成了（还剩几个页面没写完，不过无伤大雅），可以先看看效果 im.daidr.me 不难看出整体的页面风格和以前非常相似，不过确实很符合我对「炫酷」的想象 技术栈 Vue3 + WindiCSS const d = calcDelta(toWrapperStyle, fromWrapperStyle, fromWrapperStyle.t); // 因为使用了 windicss
1.1K40编辑于 2023-04-12 - 来自专栏达观数据
一文详解新一代高效前端构建工具VITE-达观数据
@vitejs/plugin-react-refresh：React 支持插件，提供 Fast Refresh 功能vite-plugin-svelte：Svelte 支持插件vite-plugin-windicss
1K20编辑于 2023-07-13 - 来自专栏愧怍的技术学习与分享
react的css
不过每个人使用风格不同，我一开始接触原子类是 windicss，用久了之后习惯了常用的 class，编写起来可以说是相当的快捷了。 不过相比 Vue 而言，react 的 css 实现着实费劲。
2.1K10编辑于 2022-12-27 Jeesite5：Star24k,Spring Boot 3.3+Vue3实战开源项目,架构深度拆解！让企业级项目开发效率提升300%的秘密武器
─ tsconfig.ts TypeScript配置文件├── uno.config.ts UnoCSS配置文件├── windi.config.ts WindiCSS
1K10编辑于 2025-02-19- 来自专栏机器学习与统计学
大模型做PPT，全新玩法，浏览器运行，可发布到互联网
可以使用 CSS、WindiCSS/UnoCSS，甚至编写自己的 Vue 组件和布局，实现像素级的完美控制。 ⚡ 快速且渐进：基于 Vite，Slidev 提供了闪电般的热更新体验。
1.1K10编辑于 2025-07-09 - 来自专栏前端Sharing
现代 Web 开发者问卷调查报告
Class / Atomic CSS」和 Tailwind CSS 这两项，直到7月才补上，所以这方面的结果没什么参考价值（有意思的是，在最初就有的「其它开源技术」选项里，基于 Tailwind CSS 的 WindiCSS
2K40发布于 2021-09-03 - 来自专栏前端二次元
如何开发一个完整的 Vite 插件？
从中你可以看到，虚拟模块的内容完全能够被动态计算出来，因此它的灵活性和可定制程度非常高，实用性也很强，在 Vite 内部的插件被深度地使用，社区当中也有不少知名的插件(如 vite-plugin-windicss
2.2K40编辑于 2023-11-20 - 来自专栏前端二次元
利用 Lint 工具链来保证代码风格和质量
vite-plugin-stylelint';// 具体配置{ plugins: [ // 省略其它插件 viteStylelint({ // 对某些文件排除检查 exclude: /windicss
1.6K20编辑于 2023-11-24
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号