PHPackages chkilel/vitewind-theme - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. chkilel/vitewind-theme ActiveOctober-theme[Utility & Helpers](/categories/utility) chkilel/vitewind-theme ====================== Octobercms theme with the power of Windi CSS and the speed of Vite JS. v1.1.0(4y ago)12332MITHTML Since Mar 2Pushed 3y ago1 watchersCompare [ Source](https://github.com/chkilel/vitewind-theme)[ Packagist](https://packagist.org/packages/chkilel/vitewind-theme)[ Docs](https://github.com/chkilel/vitewind-theme)[ RSS](/packages/chkilel-vitewind-theme/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (3)Versions (2)Used By (0) Vitewind theme ============== [](#vitewind-theme) [💨Windi CSS](https://github.com/windicss/windicss) and [ ⚡️Vite](https://github.com/vitejs/vite), for [ 🍂OctoberCMS](https://octobercms.com) & [❄️WinterCMS](https://wintercms.com/) [![Vite](https://camo.githubusercontent.com/340f64b3df0f132b4f2c99331b249e464c9ca0e7b343738d34a920f47b1782e9/68747470733a2f2f766974656a732e6465762f6c6f676f2e737667)](https://camo.githubusercontent.com/340f64b3df0f132b4f2c99331b249e464c9ca0e7b343738d34a920f47b1782e9/68747470733a2f2f766974656a732e6465762f6c6f676f2e737667) [![Vite](https://camo.githubusercontent.com/f121438b62775744304caa15b5d8d0bb6f9d67aa573b5aa7fe412a7a0b66d617/68747470733a2f2f77696e64696373732e6f72672f6173736574732f6c6f676f2e737667)](https://camo.githubusercontent.com/f121438b62775744304caa15b5d8d0bb6f9d67aa573b5aa7fe412a7a0b66d617/68747470733a2f2f77696e64696373732e6f72672f6173736574732f6c6f676f2e737667) Features -------- [](#features) - ⚡️ **It's FAST** - 20~100x times faster than Tailwind on Vite - 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2) - 🍃 Load configurations from `tailwind.config.js` - 📄 CSS `@apply` / `@screen` directives transforms - 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)` - 😎 ["Design in Devtools"](https://windicss.org/integrations/vite.html#design-in-devtools) - if you work this way in the traditional Tailwind. - 😎 ["Attributify mode"](https://windicss.org/posts/v30.html#attributify-mode), code like this ``` Button ``` can be written like: ``` Button ``` just enabled it by ``` // windi.config.js export default { attributify: true } ``` Installation ------------ [](#installation) Go to your backend to **Settings > System > Updates & Plugins** and install the theme `Chkilel.Vitewind`, then install the following Plugin. (just copy & paste the PluginID below and put it in the search box.) ``` - Chkilel.VitewindManager ``` > Cannot work without Vitewind Manager plugin, please install before to use the theme. Theme Setup ----------- [](#theme-setup) You must first install the theme dependencies. **In the theme folder**, execute: ``` npm install ``` Theme settings -------------- [](#theme-settings) Go to your backend to **Settings > Vitewind theme**, and configure the following settings: [![Setting Vitewind](./assets/images/settings.png)](./assets/images/settings.png) ``` 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 config file ---------------- [](#vite-config-file) > - If you rename the theme folder, please adjust the name \[VITE\_WIND\_RENAMED\] in `vite.config.js` accordingly. > - If you need many JS files for your layouts, add them all to the `build.rollupOptions.input` config array to be compiled. ``` 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: [...], }); ``` Layout component ---------------- [](#layout-component) The **Vitewind plugin** register a layout component to inject JS and CSS assets,manage **hot reload** in Development and inject **build assets** in production. [![Layout component](./assets/images/layout-component.png)](./assets/images/layout-component.png) Put the component in every layout and set the JS files you need to load for that layout. [![Layout component](./assets/images/layout-component-settings.png)](./assets/images/layout-component-settings.png) Development ----------- [](#development) Run the command below in your theme folder: ``` npm run dev ``` The theme DEV server will start on `http://localhost:3000/` and listen to any modification in your `.htm` files ( layouts, pages, partials,...). then, you can visite your site on its usual URL and start development. > Note the **port of the dev server**, if different from 3000 you need to adjust it in the backend settings. Production build ---------------- [](#production-build) Use `npm run build` to compile your assets. ``` npm run build ``` > Don't forget to adjust the `Enviroment` to **production** in the backend settings. Theme License ------------- [](#theme-license) MIT License - check out [LICENSE](LICENSE) file for MIT license details. Changelog --------- [](#changelog) #### 1.0.0 : initial release [](#100--initial-release) - Vitewind: the magic of Windi CSS and the speed of Vite JS #### 1.0.1 : Update theme dependency [](#101--update-theme-dependency) - Update theme dependencies #### 1.1.0 : Update dependencies and fix minor bugs [](#110--update-dependencies-and-fix-minor-bugs) - Fix theme directory path in `vite.config.js` ### Health Score 26 — LowBetter than 43% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community9 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 1529d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a78805e5a9c5daac29b427fd8914f1e73d243b04fee15a3d422b2b4b91540ab6?d=identicon)[chkilel](/maintainers/chkilel) --- Top Contributors [![chkilel](https://avatars.githubusercontent.com/u/17153244?v=4)](https://github.com/chkilel "chkilel (9 commits)") --- Tags octoberoctober-cmsoctobercmsoctobercms-themetailwindcssvitevitejswindicsswinterwinter-cmswintercmswintercms-themevitethemeoctoberoctobercmswinterwintercmsvite jswindicsswindi css ### Embed Badge ![Health badge](/badges/chkilel-vitewind-theme/health.svg) ``` [![Health](https://phpackages.com/badges/chkilel-vitewind-theme/health.svg)](https://phpackages.com/packages/chkilel-vitewind-theme) ``` ### Alternatives [rainlab/blog-plugin Blog plugin for October CMS 17257.7k](/packages/rainlab-blog-plugin)[rainlab/builder-plugin Builder plugin for October CMS 17147.2k1](/packages/rainlab-builder-plugin)[winter/wn-notes-plugin Easily add notes to any record in WinterCMS 121.4k](/packages/winter-wn-notes-plugin)[winter/wn-seo-plugin Winter CMS plugin for managing SEO tags 106.3k](/packages/winter-wn-seo-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)