PHPackages chkilel/vitawind-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. [Templating & Views](/categories/templating) 4. / 5. chkilel/vitawind-theme ActiveOctober-theme[Templating & Views](/categories/templating) chkilel/vitawind-theme ====================== Octobercms theme with the power of Tailwind CSS and the speed of Vite JS. 1.0.0(3y ago)4151MITHTML Since Sep 18Pushed 3y ago1 watchersCompare [ Source](https://github.com/chkilel/vitawind)[ Packagist](https://packagist.org/packages/chkilel/vitawind-theme)[ Docs](https://github.com/chkilel/vitawind-theme)[ RSS](/packages/chkilel-vitawind-theme/feed)WikiDiscussions main Synced 3w ago READMEChangelog (1)Dependencies (3)Versions (2)Used By (0) Vitawind theme ============== [](#vitawind-theme) [πŸ’¨ Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [ ⚑️Vite](https://github.com/vitejs/vite), for [ πŸ‚ OctoberCMS](https://octobercms.com) & [❄️ WinterCMS](https://wintercms.com/) [![Vitawind](https://camo.githubusercontent.com/9ec6dc1903e70b3caf8ad48d10f539296e9f930e55faff9a477528fc1bc46627/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313635353635363639352f7669746177696e642d7468656d652f4769746875622d707265766965775f7271797362712e706e67)](https://camo.githubusercontent.com/9ec6dc1903e70b3caf8ad48d10f539296e9f930e55faff9a477528fc1bc46627/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f63686b696c656c2f696d6167652f75706c6f61642f76313635353635363639352f7669746177696e642d7468656d652f4769746875622d707265766965775f7271797362712e706e67) Installation ------------ [](#installation) Go to your backend to **Settings > System > Updates & Plugins** and install the theme `Chkilel.Vitawind`, then install the `VitewindManager` Plugin. (just copy & paste the PluginID below and put it in the search box.) ``` - Chkilel.VitewindManager ``` > Cannot work without Vitewind Manager plugin, please install it to use the theme. Theme Setup ----------- [](#theme-setup) You must first install the theme dependencies. **In the theme folder**, run: ``` npm install // or yarn 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 modify the theme name in the `theme.yaml` file. ``` Vite config file ---------------- [](#vite-config-file) > - If you rename the theme folder, please adjust the name \[VITAWIND\_FOLDER\] 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/[VITAWIND_FOLDER]/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 the layout and set the JS files you need to load for each layout, you can use different JS files for each 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 // or yarn 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 // or yarn 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) - Vitawind: the power of Tailwind CSS and the speed of Vite JS ### Health Score 24 β€” LowBetter than 31% of packages Maintenance20 Infrequent updates β€” may be unmaintained Popularity11 Limited adoption so far Community10 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% 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 1374d 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 (4 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags octobercmsoctobercms-themetailwindtailwindcssvitevitejswintercmswintercms-themevitethemeoctoberoctobercmswinterwintercmsvite jswindicsswindi css ### Embed Badge ![Health badge](/badges/chkilel-vitawind-theme/health.svg) ``` [![Health](https://phpackages.com/badges/chkilel-vitawind-theme/health.svg)](https://phpackages.com/packages/chkilel-vitawind-theme) ``` ### Alternatives [helsingborg-stad/municipio A bootstrap theme for creating municipality sites. 4028.3k10](/packages/helsingborg-stad-municipio)[pressbooks/pressbooks Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS. 45344.0k1](/packages/pressbooks-pressbooks)[october/rain October Rain Library 1581.7M73](/packages/october-rain)[rainlab/blog-plugin Blog plugin for October CMS 17158.6k](/packages/rainlab-blog-plugin)[rainlab/translate-plugin Translate plugin for October CMS 12767.8k10](/packages/rainlab-translate-plugin)[rainlab/pages-plugin Pages plugin for October CMS 12353.3k4](/packages/rainlab-pages-plugin) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)