WINDICSS

最新推荐文章于 2024-09-09 09:21:00 发布

WindiCSS

最新推荐文章于 2024-09-09 09:21:00 发布

阅读量3.2k

点赞数

文章标签： css html javascript 前端 github

本文链接：https://blog.csdn.net/weixin_45503094/article/details/117453229

版权

windicss 是以 Tailwindcss 为灵感制作的库，windicss更快、兼容性更好、使用 Typescript 构建，他们解决的问题是类似的。

如果您已经熟悉Tailwind CSS，请考虑使用Windi CSS作为它的替代方案。它提供了更快的加载时间，并与Tailwind v2.0完全兼容，并具有更多功能。

为什么选择Windi CSS：

当我的项目变大并且包含大约数十个组件时，初始编译时间达到了3s，而热更新花费了超过1s。

官方指引、介绍：WINDICSS

参与项目：GITHUB

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

WindiCSS

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

windicss:下一代Tailwind CSS编译器

03-08

Windi CSS 下一代编译器。如果您已经熟悉Tailwind CSS，请考虑使用Windi CSS作为它的替代方案。它提供了更快的加载时间，并与Tailwind v2.0完全兼容，并具有更多功能。否则，您可以将Windi CSS视为实用程序优先CSS库。为什么选择Windi CSS？ :thinking_face: 作者的引文应说明他创建动机：当我的项目变大并且包含大约数十个组件时，初始编译时间达到了3s，而热更新花费了超过1s。 @voorjar 通过扫描HTML和CSS并按需生成实用程序，能够提供和快速的HMR开发，并且不需要清除生产。在阅读有关它的更多信息。整合方式构架包裹版本命令行界面 VSCode扩展恶毒卷起 Vue（Webpack） Card.svelte React 快来了... 角度的快来了... 文献资料 :open_book: 检查。讨论区我

devtools热部署

weixin_45711074的博客

06-17

495

热部署devtools

参与评论您还未登录，请先登录后发表或查看评论

推荐文章：探索风之CSS - Windi CSS的魔力与未来展望

热门推荐

Rookie

05-17

4万+

文章目录打开DevTools元素面板Style面板Computed面板devtools取色器打开DevTools devtools,即Chrome 开发者工具，Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。打开devtools的三种方式：在Chrome菜单中选择更多工具再选择并点击开发者工具（右图即是Chrome菜单符号，位于屏幕的右上角）在页面元素上右键点击，选择 “检查”（这个操作会直接跳转到指定元素的元素面板

vue3 + vite 项目搭建 - 引入windcss

qq_40026668的博客

11-29

2759

安装依赖 npm i -D vite-plugin-windicss windicss //或者 yarn add vite-plugin-windicss windicss --dev 使用插件 // vite.config.ts import WindiCSS from 'vite-plugin-windicss' export default defineConfig({ plugins: [ WindiCSS() ], }) 导入样式 // main.ts import 'vi

windicss-intellisense：用于VS Code的智能WindiCSS工具

03-04

该插件打包了windicss编译器，因此您无需安装windicss即可使用它，并且还支持配置文件(tailwind|windi).config.(js|cjs|ts) 。特征自动完成有关实用程序和变体的智能建议。悬停预览将鼠标悬停在完整CSS上以...

windicss-webpack-plugin::leaf_fluttering_in_wind:适用于webpack的Windi CSS:high_voltage:

03-18

windicss-webpack-plugin :leaf_fluttering_in_wind:于Webpack的下一代实用程序优先CSS框架。特征 :puzzle_piece:按需CSS实用程序（与Tailwind CSS v2兼容） :package:按需本地元素样式重置 :fire:热模块更换...

webpack-windicss-plugin::leaf_fluttering_in_wind:适用于webpack的Windi CSS:high_voltage:

03-09

windicss-webpack-plugin 用于Webpack的，速度很快！ :high_voltage: aka按需Tailwind CSS 特征 :high_voltage: 快速-比Webpack应用上的Tailwind快20到100倍 :puzzle_piece: 按需CSS实用程序（与Tailwind CSS v2...

vite-plugin-windicss：Vite的Windicss

02-16

vite-plugin-windicss Vite的aka按需TailwindCSS 特征 :high_voltage: 快速-比Vite上的Tailwind快15〜20倍 :puzzle_piece: 按需CSS实用程序（与Tailwind CSS v2兼容） :package: 按需本地元素样式重置 :fire: ...

docs：Wind Windi CSS文档

03-04

Windi CSS 这是使用构建的的文档网站。发展安装依赖项： npm install 启动开发服务器： npm run dev 运行linter npm run lint 屏幕截图 :camera: 介绍

windicss-runtime-dom:{WIP}使用一行代码为任何站点启用Windi CSS，而无需任何构建工具

03-25

Windicss-Runtime-Dom :test_tube: 过期的在没有任何构建工具的情况下，使用任何一行代码的站点启用浏览器运行时上的Windi CSS。 < script src =" https://unpkg.com/windicss-runtime-dom " > </ script &...

使用windcss及打开windicss中文文档

m0_47186697的博客

04-06

8116

Windi CSS 是下一代工具优先的 CSS 框架。当项目越来越大时（大约几十个组件），使用 Tailwind CSS 最初的编译时间达到了 3s，而热更新时的时间甚至超过了 1s，可以说Windi Css是一个可以让我们快速上手开发的一个组件库，他里面包含了几乎所有的css样式，可以让我们不需要再去繁琐的写css样式，原来几行的css现在只需要短短的几个字符。他的许多新特性给我们带来了极大的方便，并且他给我们带来了更快的加载体验。在使用前可以安装下vscode一个windicss代码提示，

【Vue3/Css】windicss在Vue3中的安装与使用

【敦厚的曹操】的专栏

12-30

1894

【Vue3/Css】windicss在Vue3中的安装与使用

vue3中vite集成使用Windi CSS工具框架快速开发

weixin_44738844的博客

05-17

966

Windi CSS 是下一代工具优先的 CSS 框架。通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供更快的加载体验以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。Windi CSS 支持 Tailwind CSS 的所有工具类，无需任何额外配置。你可以像平常一样正常编写你的组件，同时在样式表中使用实用类。

Windi Css

qq_45578388的博客

11-07

1万+

文章目录一、Windi Css是什么？二、代码演示2.读入数据总结一、Windi Css是什么？对于我来说Windi Css是一个可以让我们快速上手开发的一个组件库，他里面包含了几乎所有的css样式，可以让我们不需要再去繁琐的写css样式，原来几行的css现在只需要短短的几个字符。他的许多新特性给我们带来了极大的方便，并且他给我们带来了更快的加载体验二、代码演示具体使用方法查阅windi Css的文档我在这里只记录一个片段代码如下（示例）： import numpy as np import p

手撸一套原子类css(类似tailwindcss、unocss、windcss)

weixin_42424283的博客

11-11

4620

用最少的代码手敲一套原子类css，共计约1100个左右的常用样式；关于增加1100个左右的样式会不会增加项目体积，新项目的大小约8kb,加上1100个样式后为45kb； github仓库地址：wfxt0911/atomicClass: 原子类css (github.com) 如果该示例对你有启发，希望您给个Star

快速入门windicss框架常用类名配置

ivan5277的博客

04-18

1189

Windi CSS 是一个工具优先的 CSS 框架，它的设计思想与 Tailwind CSS类似，通过提供一系列预设的实用类名来帮助开发者快速编写符合语义化的 HTML 样式。

windicss grid

05-16

Windicss是一个基于CSS的工具，它提供了一些简便的方式来编写CSS代码。其中，Windicss的网格系统提供了一些方便的类来创建网格布局。以下是一些使用Windicss网格系统的示例： 1. 创建一个具有12列的网格布局： ```html <div class="grid grid-cols-12"> <div class="col-span-6">1/2</div> <div class="col-span-6">1/2</div> </div> ``` 2. 创建一个具有3列的网格布局，其中第2列占据两个网格单元： ```html <div class="grid grid-cols-3"> <div class="col-span-1">1/3</div> <div class="col-span-2">2/3</div> </div> ``` 3. 创建一个具有3列的网格布局，其中第1列和第2列占据一半的宽度，第3列占据整个剩余空间： ```html <div class="grid grid-cols-3"> <div class="col-span-2">1/2</div> <div class="col-span-2">1/2</div> <div class="col-span-4">4/4</div> </div> ``` 这些示例只是Windicss网格系统的一部分功能，Windicss还提供了其他方便的类来创建网格布局，例如`grid-rows`、`gap`等。