Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。
为什么选择 Windi CSS？
通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。
基础用法
Windi CSS 支持 Tailwind CSS 的所有工具类，无需任何额外配置。
你可以像平常一样正常编写你的组件，同时在样式表中使用实用类：
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
<img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">Erin Lindford</p>
<p class="text-gray-500 font-medium">产品经理</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
消息
</button>
</div>
</div>
只有你使用的工具类才会产生相应的 CSS。
集成
我们为主流工具提供了最佳的适配，在每一个工具上都有最好的开发体验。请参阅 集成指南，选择你最喜欢的工具即刻体验！
配置 Windi CSS
Windi CSS 中的配置与你在 Tailwind CSS 中所期望的相似，但有额外的增强和特性。
如果你要从 Tailwind 迁移，请先查看 迁移指南。
配置文件
默认情况下，Windi CSS 会在你的项目根目录下搜索配置文件。以下是有效的名称：
windi.config.tswindi.config.jstailwind.config.tstailwind.config.js
得益于 sucrase，支持原生 ES 模块和开箱即用的 TypeScript。
为了获得配置的类型检查，你可以从 windicss/helpers 导入 defineConfig 函数：
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* 配置项... */
})
// @ts-check - enable TS check for js file
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* 配置项... */
})
defineConfig 是带有类型提示的帮助函数，这意味着如果你不需要自动补全/类型检查，你也可以忽略此处。
export default {
/* 配置项... */
}
你可以使用编辑器的自动补全功能，来查看可用的配置字段。对功能配置的描述将在对应页面中进行展示。
配置示例
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import plugin from 'windicss/plugin'
export default defineConfig({
darkMode: 'class', // or 'media'
theme: {
extend: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
colors: {
gray: colors.coolGray,
blue: colors.lightBlue,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
spacing: {
128: '32rem',
144: '36rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
plugins: [
plugin(({ addUtilities }) => {
const newUtilities = {
'.skew-10deg': {
transform: 'skewY(-10deg)',
},
'.skew-15deg': {
transform: 'skewY(-15deg)',
},
}
addUtilities(newUtilities)
}),
plugin(({ addComponents }) => {
const buttons = {
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
},
'.btn-blue': {
'backgroundColor': '#3490dc',
'color': '#fff',
'&:hover': {
backgroundColor: '#2779bd',
},
},
'.btn-red': {
'backgroundColor': '#e3342f',
'color': '#fff',
'&:hover': {
backgroundColor: '#cc1f1a',
},
},
}
addComponents(buttons)
}),
plugin(({ addDynamic, variants }) => {
addDynamic('skew', ({ Utility, Style }) => {
return Utility.handler
.handleStatic(Style('skew'))
.handleNumber(0, 360, 'int', number => `skewY(-${number}deg)`)
.createProperty('transform')
}, variants('skew'))
}),
require('windicss/plugin/filters'),
require('windicss/plugin/forms'),
require('windicss/plugin/aspect-ratio'),
require('windicss/plugin/line-clamp'),
require('windicss/plugin/typography')({
modifiers: ['DEFAULT', 'sm', 'lg', 'red'],
}),
],
})-
1、Windi CSS简介 Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。 通过扫描 HTML 和 CSS 按需生成工具类（utilities），W
-
Hi, 我是 Lem, 最近在学习Tailwindcss，进行了下学习记录： 前言 Windi CSS 是一个下一代实用程序优先的 CSS 框架 如果您已经熟悉 Tailwind CSS，可以考虑将 Windi CSS 作为 Tailwind 的按需替代品，它提供了更快的加载时间、与 Tailwind v2.0的完全兼容性以及一系列额外的酷功能。 为什么会有 windicss? 引用作者的说明 W
-
vite项目集成Windi Css Windi Css官网地址：https://cn.windicss.org/guide/installation.html vite官网地址：https://vitejs.cn/ 安装相关包： npm i -D vite-plugin-windicss windicss 然后，在你的 Vite 配置中添加插件： vite.config.js import Win
-
当我们使用 Windi CSS 编写样式时，直接将样式写在类中，当样式数量较多时，代码就会变得冗长臃肿，例如以下代码： <div class="text-3xl font-bold text-black m-2"> <div class="border-2 p-4 bg-yellow-300">111</div> <div class="border--2 p-4 bg-red-30
-
问题内容： 出于各种原因，在编写 Java应用程序时 ，调用会被皱眉，所以如何通知调用过程并非一切都按计划进行？ 编辑： 1是任何非零退出代码的。 问题答案： 当“应用程序”实际上是较大的Java应用程序（服务器）的子应用程序（例如servlet，applet）时，对的使用会被拒绝：在这种情况下，它可能会停止JVM并因此停止所有其他子应用程序。在这种情况下，抛出适当的异常（最好由应用程序框架/服务
-
问题内容： 我知道这个话题已经解决了上千次。但是我找不到解决办法。 我正在尝试计算列表（df2.list2）的列中出现列表（df1.list1的每一行）的频率。所有列表仅包含唯一值。List1包含约300.000行，list2包含30.000行。 我有一个有效的代码，但是它的运行速度非常慢（因为我使用的是迭代程序）。我也尝试过itertuples（），但它给了我一个错误（“要解压缩的值太多（预期2
-
允许我填充包含复选框和单选按钮的HTML表单的替代方法。 我已经设法使用eclipse中的HtmlUnit库将数据发送到html表单并检索页面（我已经发布了下面的Java代码）。 然而，当我将这些代码复制到我的Android项目中时，我发现Android不支持HtmlUnit库。 对于Android来说，HtmlUnit还有其他替代方案吗？另一种方法应该能够将文本、复选框、单选按钮填写到Html表
-
问题内容： 以前，我总是以为Vector在长度未知的情况下可以很好地用于非描述对象。据我所知，我也认为它也是线程安全的 有什么改变不应该再使用了，替代方案是什么？ 问题答案： 您应该使用而不是。虽然使用了内部同步，但是对于实际的一致性而言，这很少够用，只会在真正不需要时降低执行速度。 另请参阅此stackoverflow问题。
-
问题内容： 我过去曾使用ServiceWrapper几次，但是，对于商业产品，双重许可有些复杂（通常需要付费）。是否存在具有类似功能的完全FOSS替代产品？ 问题答案： 尽管我尚未完成评估，但YAJSW似乎是最好的选择。
-
问题内容： PHP_excel是否有其他选择可以以自定义格式“导出到XLSX / XLS”文件？ 问题答案： 我编写了一个非常简单的类，用于导出到“ Excel XML”（又名SpreadsheetML）。对于最终用户而言，它不如XSLX方便（取决于文件扩展名和Excel版本，他们可能会收到警告消息），但使用起来比XLS或XLSX容易得多。
-
问题内容： 对于像 制作视频的人相信 在许多情况下，冬眠过大 基本的sql是一种很好的语言，它可以将很多冬眠抽象化 我想听听他们如何比较，以及每个人的优缺点。 问题答案： 在这里，您可以找到Java ORM和持久性解决方案的详尽列表。并非所有以下Hibernate / JPA方法都遵循，其中某些方法在设计上相当容易。 当然，该站点上没有列出解决方案，例如带有模板的Spring JDBC等 。对于需
-
问题内容： 我目前有这样的代码： 但是，这可能会在将来导致难以发现的错误，因为读者可能不会注意到上面出现的错误。或者，贡献者可能会错误地添加，而忘记添加。 我如何避免这种陷阱？ 问题答案： 这样，实际上是一个“全局”。可以从任何地方对其进行读写。 与字典的替代方法相比，我更喜欢这种方法，因为它可以自动完成变量名。