Windi CSS集成指南：Vite、Webpack、Rollup和Nuxt

Windi CSS是下一代实用优先的CSS框架，专为现代前端开发工具链设计。这个快速、灵活的CSS框架能够与Vite、Webpack、Rollup和Nuxt等流行构建工具无缝集成，为开发者提供极致的开发体验。

🚀 为什么选择Windi CSS？

Windi CSS通过按需生成实用类，实现了闪电般的编译速度和即时热更新。相比传统CSS框架，Windi CSS在大型项目中表现出色，避免了生产环境中的冗余代码清理问题。

📦 快速安装配置

首先安装Windi CSS核心包：

npm install -D windicss
# 或
yarn add -D windicss
# 或
pnpm add -D windicss

🔧 Vite集成指南

Vite用户可以通过官方插件快速集成Windi CSS：

npm install -D vite-plugin-windicss

在vite.config.ts中配置：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

⚙️ Webpack配置方法

Webpack用户可以使用专门的插件：

npm install -D windicss-webpack-plugin

在webpack.config.js中添加：

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  plugins: [
    new WindiCSSWebpackPlugin(),
  ],
}

📋 Rollup集成步骤

Rollup项目同样有官方支持：

npm install -D rollup-plugin-windicss

配置rollup.config.js：

import windicss from 'rollup-plugin-windicss'

export default {
  plugins: [
    windicss(),
  ],
}

🎯 Nuxt.js完美融合

Nuxt.js用户可以直接使用专用模块：

npm install -D nuxt-windicss

在nuxt.config.js中启用：

export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

🛠️ 配置Windi CSS

创建windi.config.js文件来自定义配置：

export default {
  theme: {
    extend: {
      colors: {
        primary: '#1e90ff',
      },
    },
  },
  plugins: [
    // 添加自定义插件
  ],
}

💡 核心功能特性

按需生成

Windi CSS智能扫描你的HTML和CSS文件，只为实际使用的样式生成CSS，大幅减少包体积。

热更新优化

开发环境中的样式更改几乎瞬间生效，无需重新编译整个样式表。

属性模式支持

通过attributify模式，可以直接在HTML属性中使用实用类。

插件生态系统

丰富的插件支持，包括表单、排版、滚动捕捉等功能。

🎉 开始使用

集成完成后，你就可以在项目中使用Windi CSS的实用类了：

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Windi CSS!
</div>

📚 进阶配置选项

Windi CSS提供了多种配置模式：

• 编译模式：预先生成所有实用类
• 解释模式：运行时按需生成样式
• 属性模式：通过HTML属性应用样式

🔍 开发工具支持

VSCode用户可安装windicss-intellisense插件，获得自动完成和语法高亮支持。

Windi CSS的现代化设计理念和出色的工具链集成，让它成为构建高性能Web应用的理想选择。无论你使用Vite、Webpack、Rollup还是Nuxt，都能享受到流畅的开发体验和卓越的性能表现。