README

💨Windi CSS 和 ⚡️Vite ，为 🍂OctoberCMS & ❄️WinterCMS

功能

• ⚡️ 它非常快 - 比Vite上的Tailwind快20~100倍

• 🧩 按需CSS实用工具（完全兼容Tailwind CSS v2）

• 🍃 从tailwind.config.js加载配置

• 📄 CSS @apply / @screen 指令转换

• 🎳 支持变体组 - 例如 bg-gray-200 hover:(bg-gray-100 text-red-300)

• 😎 "在开发工具中设计" - 如果你以这种方式在传统的Tailwind中工作。

• 😎 "Attributify模式"，代码如下

  <button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
    Button
  </button>

  可以写成这样

  <button
    bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
    text="sm white"
    font="mono light"
    p="y-2 x-4"
    border="2 rounded blue-200">
    Button
  </button>

  只需通过以下方式启用它

  // windi.config.js
  export default {
  attributify: true
  }

安装

进入你的后端到 设置 > 系统 > 更新与插件 并安装主题 Chkilel.Vitewind，然后安装以下插件。（只需复制并粘贴下面的插件ID，并将其放入搜索框。）

    - Chkilel.VitewindManager

没有Vitewind Manager插件无法工作，请在使用主题之前安装。

主题设置

你必须首先安装主题依赖项。在主题文件夹中，执行

npm install

主题设置

进入你的后端到 设置 > Vitewind主题，并配置以下设置

    Environment:
        - Use `.env` configuration  : will use the `APP_ENV` value in the .env file
        - Development               : if you are working on the theme development (npm run dev)
        - Production                : if you are in production, the theme must be built before (npm run build)

    Port number : Enter the port on which the theme dev server is running (when you run `npm run dev`), default to 3000.

    Theme: select the appropiate theme, if you modified the theme name in the `theme.yaml` file.

Vite配置文件

• 如果你重命名了主题文件夹，请相应地调整vite.config.js中的名称[VITE_WIND_RENAMED]。
• 如果你需要很多JS文件用于你的布局，将它们全部添加到build.rollupOptions.input配置数组中以进行编译。

import WindiCSS from 'vite-plugin-windicss'
export default ({command}) => ({
    base: command === 'serve' ? '' : '/themes/[VITE_WIND_RENAMED]/public/build/', // Addjust the name of the theme
    publicDir: 'fake_dir_so_nothing_gets_copied',
    processCssUrls: true,
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: [
                'resources/js/app.js',
                'resources/js/home.js',
                // Add here all the files you need if you load different javascript code in each layout
                'ressource/js/myFirstAddedFile.js',
                'ressource/js/mySecondAddedFile.js',
                ...
            ],
        },
    },
    plugins: [...],
});

布局组件

Vitewind插件注册一个布局组件以注入JS和CSS资产，管理开发中的热重载以及在生产中注入构建资产。

将组件放在每个布局中，并设置你需要加载的JS文件。

开发

在你的主题文件夹中运行以下命令

npm run dev

主题开发服务器将在https://:3000/上启动，并监听你的.htm文件（布局、页面、部分等）的任何修改。然后，你可以访问你的网站并开始开发。

请注意开发服务器的端口，如果与3000不同，您需要在后端设置中调整它。

生产构建

使用npm run build来编译你的资产。

npm run build

不要忘记在后台设置中将环境调整为生产。

主题许可证

MIT许可证 - 请参阅LICENSE文件以获取MIT许可证的详细信息。

变更日志

1.0.0 : 初始版本

• Vitewind：Windi CSS的魔法和Vite JS的速度

1.0.1 : 更新主题依赖项

• 更新主题依赖项

1.1.0 : 更新依赖项和修复小错误

• 修复vite.config.js中的主题目录路径