We're excited to introduce xTailwind, a new theme for XOOPS 2.5.11+ that brings the modern utility-first approach of Tailwind CSS to the XOOPS ecosystem. Paired with DaisyUI's elegant component library, xTailwind gives site administrators and developers a fresh alternative to Bootstrap-based themes — without sacrificing any of the features you expect.
Why Tailwind?
Tailwind CSS has reshaped how modern websites are built. Instead of pre-styled components you override and fight against, Tailwind provides small utility classes you compose to build exactly what you want. The result is less CSS, more control, and designs that don't all look the same.
DaisyUI sits on top of Tailwind to bring back the convenience of semantic component classes — btn, card, navbar, modal, dropdown — along with a built-in theming system. It's the best of both worlds: utility-first flexibility when you need it, ready-made components when you don't.
34 Themes, One Click Away
xTailwind ships with DaisyUI's full collection of 34 pre-built themes: light, dark, cupcake, corporate, cyberpunk, synthwave, dracula, forest, sunset, nord, and many more. Users can switch between them live from the navbar, with no page reload.
The switcher is accompanied by a clean Light/Dark toggle button with a translatable text label. Both preferences are saved to the visitor's browser and persist across sessions. A tiny inline script applies the saved theme before the page paints, so there's never a flash of the wrong colors.
Drop-In Simplicity for Site Admins
We know most XOOPS site administrators aren't JavaScript developers, and we respect that. xTailwind is a true drop-in theme: download it, copy it into your themes/ directory, activate it in XOOPS admin, and you're done. The compiled CSS ships with the theme. No Node.js. No npm. No build step.
Developers who want to customize styles, add components, or bundle a new DaisyUI theme can still do all of that — the source files are right there in the repo, and rebuilding takes one command. But that's an opt-in path, not a requirement.
Built for the Modern Web
Behind the scenes, xTailwind embraces everything that makes modern web development pleasant:
- Alpine.js for declarative interactivity — dropdowns, mobile navigation, toasts, and modals all work without a single custom JavaScript file. Shared from xoops_lib/Frameworks/alpine/ so multiple Tailwind themes can use the same copy.
- XoopsFormRendererTailwind — a brand-new form renderer contributed to XOOPS core that outputs native DaisyUI form components. Every XOOPS form (user registration, admin preferences, module settings) renders with proper Tailwind styling, matching whichever DaisyUI theme is active.
- Native RTL support via Tailwind's logical properties (ms-/me-, text-start/text-end) and the XOOPS _TEXT_DIRECTION constant. Arabic, Hebrew, and Persian sites get correct mirroring automatically.
- WCAG AA contrast baked into every DaisyUI theme's color palette.
- Self-hosted with no external CDN dependencies, following the same principle as xSwatch5.
A New Architecture, Not a Replacement
xTailwind doesn't replace xSwatch5 — it joins it. Site owners who love Bootstrap and the Bootswatch variant collection can continue using xSwatch5 v2.0 (also recently released). Site owners who want to explore a utility-first workflow or prefer DaisyUI's aesthetic can pick xTailwind. Both are supported, both are actively maintained, and both share XOOPS's commitment to stability.
For developers building custom themes, xTailwind also serves as a reference implementation. A complete TUTORIAL.md walks through how to create your own Tailwind theme from scratch, plus a class-by-class guide for porting existing Bootstrap themes to Tailwind + DaisyUI.
Share a Library, Not the Libraries
One of the nicer architectural decisions in xTailwind: Alpine.js lives in XOOPS core's xoops_lib/Frameworks/alpine/ directory, right alongside jQuery and Chart.js. If you build additional Tailwind themes down the road, they all share the same 45 KB Alpine.js runtime. One download for site administrators, one place to update, no duplication across themes.
Status and Availability
xTailwind is currently released as a proof of concept — the core theme, navigation, block system, theme switcher, and form renderer are all working. Module-specific template overrides (newbb, publisher, wggallery, etc.) are the next phase of development, and community contributions are very welcome.
Grab it from the repo, drop it into your XOOPS installation, and let us know what themes you bundle, what components you build, and what you'd like to see next. The future of XOOPS theming is wide open, and we'd love for you to help shape it.
Happy theming.
Download: https://github.com/mambax7/xtailwind
Why Tailwind?
Tailwind CSS has reshaped how modern websites are built. Instead of pre-styled components you override and fight against, Tailwind provides small utility classes you compose to build exactly what you want. The result is less CSS, more control, and designs that don't all look the same.
DaisyUI sits on top of Tailwind to bring back the convenience of semantic component classes — btn, card, navbar, modal, dropdown — along with a built-in theming system. It's the best of both worlds: utility-first flexibility when you need it, ready-made components when you don't.
34 Themes, One Click Away
xTailwind ships with DaisyUI's full collection of 34 pre-built themes: light, dark, cupcake, corporate, cyberpunk, synthwave, dracula, forest, sunset, nord, and many more. Users can switch between them live from the navbar, with no page reload.
The switcher is accompanied by a clean Light/Dark toggle button with a translatable text label. Both preferences are saved to the visitor's browser and persist across sessions. A tiny inline script applies the saved theme before the page paints, so there's never a flash of the wrong colors.
Drop-In Simplicity for Site Admins
We know most XOOPS site administrators aren't JavaScript developers, and we respect that. xTailwind is a true drop-in theme: download it, copy it into your themes/ directory, activate it in XOOPS admin, and you're done. The compiled CSS ships with the theme. No Node.js. No npm. No build step.
Developers who want to customize styles, add components, or bundle a new DaisyUI theme can still do all of that — the source files are right there in the repo, and rebuilding takes one command. But that's an opt-in path, not a requirement.
Built for the Modern Web
Behind the scenes, xTailwind embraces everything that makes modern web development pleasant:
- Alpine.js for declarative interactivity — dropdowns, mobile navigation, toasts, and modals all work without a single custom JavaScript file. Shared from xoops_lib/Frameworks/alpine/ so multiple Tailwind themes can use the same copy.
- XoopsFormRendererTailwind — a brand-new form renderer contributed to XOOPS core that outputs native DaisyUI form components. Every XOOPS form (user registration, admin preferences, module settings) renders with proper Tailwind styling, matching whichever DaisyUI theme is active.
- Native RTL support via Tailwind's logical properties (ms-/me-, text-start/text-end) and the XOOPS _TEXT_DIRECTION constant. Arabic, Hebrew, and Persian sites get correct mirroring automatically.
- WCAG AA contrast baked into every DaisyUI theme's color palette.
- Self-hosted with no external CDN dependencies, following the same principle as xSwatch5.
A New Architecture, Not a Replacement
xTailwind doesn't replace xSwatch5 — it joins it. Site owners who love Bootstrap and the Bootswatch variant collection can continue using xSwatch5 v2.0 (also recently released). Site owners who want to explore a utility-first workflow or prefer DaisyUI's aesthetic can pick xTailwind. Both are supported, both are actively maintained, and both share XOOPS's commitment to stability.
For developers building custom themes, xTailwind also serves as a reference implementation. A complete TUTORIAL.md walks through how to create your own Tailwind theme from scratch, plus a class-by-class guide for porting existing Bootstrap themes to Tailwind + DaisyUI.
Share a Library, Not the Libraries
One of the nicer architectural decisions in xTailwind: Alpine.js lives in XOOPS core's xoops_lib/Frameworks/alpine/ directory, right alongside jQuery and Chart.js. If you build additional Tailwind themes down the road, they all share the same 45 KB Alpine.js runtime. One download for site administrators, one place to update, no duplication across themes.
Status and Availability
xTailwind is currently released as a proof of concept — the core theme, navigation, block system, theme switcher, and form renderer are all working. Module-specific template overrides (newbb, publisher, wggallery, etc.) are the next phase of development, and community contributions are very welcome.
Grab it from the repo, drop it into your XOOPS installation, and let us know what themes you bundle, what components you build, and what you'd like to see next. The future of XOOPS theming is wide open, and we'd love for you to help shape it.
Happy theming.
Download: https://github.com/mambax7/xtailwind
|
|
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $15.00 |
| Due Date: | Apr 30 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $15.00 |
 |
|