Skip to content

Commit 47e55b2

Browse files
mambax7mambax7
committed
add xtailwind and xtailwind2 themes
1 parent 1728323 commit 47e55b2

50 files changed

Lines changed: 6694 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎htdocs/themes/xtailwind/.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Node.js build dependencies — only needed during CSS compilation
2+
node_modules/
3+
4+
# npm / yarn logs
5+
npm-debug.log*
6+
yarn-debug.log*
7+
yarn-error.log*
8+
9+
# OS cruft
10+
.DS_Store
11+
Thumbs.db
12+
desktop.ini
13+
14+
# Editor cruft
15+
.idea/
16+
.vscode/
17+
*.swp
18+
*~
19+
20+
# Leave css/styles.css COMMITTED — end users should not need Node.js to use the theme
21+
# Leave package-lock.json COMMITTED — reproducible builds

‎htdocs/themes/xtailwind/LICENSE‎

Lines changed: 339 additions & 0 deletions
Large diffs are not rendered by default.

‎htdocs/themes/xtailwind/README.md‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
xTailwind
2+
=========
3+
4+
A Tailwind CSS + DaisyUI theme for [XOOPS 2.5.12](https://xoops.org). Proof of concept sibling to xSwatch5 for site owners who prefer a utility-first CSS framework.
5+
6+
**Status: Proof of concept.** Use for evaluation. For production sites, see [xSwatch5](../xswatch5/).
7+
8+
## Why a Tailwind theme?
9+
10+
Tailwind takes a fundamentally different approach from Bootstrap:
11+
12+
- **Utility-first** — compose designs from small single-purpose classes (`flex`, `px-4`, `bg-primary`) rather than pre-styled components
13+
- **Build step** — a compiler scans your templates and ships only the classes you actually use, producing a smaller final CSS
14+
- **DaisyUI** bridges the gap by adding component classes (`.btn`, `.card`, `.navbar`, `.modal`) on top of Tailwind, plus 34 pre-built themes switchable via a single `data-theme` attribute
15+
16+
xTailwind pairs Tailwind with DaisyUI so you get the Bootswatch-style theme picker experience (34 themes out of the box) with Tailwind's smaller payload and modern tooling.
17+
18+
## Features
19+
20+
- **34 DaisyUI themes** — light, dark, cupcake, cyberpunk, synthwave, dracula, and 28 more, all switchable from the navbar
21+
- **Live theme switcher** with localStorage persistence and FOUC-free restoration
22+
- **Light/dark toggle** that respects OS preference on first visit
23+
- **Alpine.js** (~15 KB) for interactive components — dropdowns, mobile nav, toasts, modals (loaded from the shared `xoops_lib/Frameworks/alpine/` location so multiple Tailwind themes share a single copy)
24+
- **Built-in RTL support** via Tailwind logical properties
25+
- **WCAG AA** baseline from DaisyUI's color system
26+
27+
## Installation
28+
29+
xTailwind ships with the compiled CSS already in place (`css/styles.css`), so there is **no build step required** for end users. Just drop the theme in and activate it.
30+
31+
1. Copy the `xtailwind/` directory to `themes/` in your XOOPS installation
32+
2. In XOOPS admin → System → Preferences → General Settings → select `xtailwind` as the theme
33+
34+
Alpine.js (required for interactive components like dropdowns and mobile nav) is loaded from the shared `xoops_lib/Frameworks/alpine/` location in XOOPS core. No per-theme JavaScript install needed.
35+
36+
## Rebuilding the CSS (developers only)
37+
38+
You only need to rebuild if you modify templates, add custom CSS to `css/input.css`, or change which DaisyUI themes are bundled. End users never need to run these commands.
39+
40+
Prerequisites: Node.js 18+ installed on your development machine.
41+
42+
```bash
43+
cd themes/xtailwind
44+
npm install # one-time: downloads Tailwind, DaisyUI, and Typography plugin
45+
npm run build # compiles css/input.css → css/styles.css (minified)
46+
```
47+
48+
For live rebuilding during development:
49+
```bash
50+
npm run watch
51+
```
52+
53+
After editing and rebuilding, commit the updated `css/styles.css` so the next person can use the theme without a build step.
54+
55+
## Theme Switcher
56+
57+
The navbar includes:
58+
59+
**Dark/Light toggle** — switches to a sensible light or dark DaisyUI theme. The opposite mode is picked based on the current theme's classification (light/dark) defined in `theme_autorun.php`.
60+
61+
**Theme dropdown** — lists all 34 DaisyUI themes. Selecting one applies instantly and persists to `localStorage`. Disable themes you don't want by removing them from both `tailwind.config.js` (the `daisyui.themes` array) **and** `theme_autorun.php` (the `$daisyThemes` array), then rebuild.
62+
63+
## How it compares to xSwatch5
64+
65+
| | xSwatch5 | xTailwind |
66+
|---|----------|-----------|
67+
| CSS framework | Bootstrap 5.3.8 | Tailwind 3.4 + DaisyUI 4 |
68+
| Themes | 21 Bootswatch variants | 34 DaisyUI themes |
69+
| CSS approach | Component library | Utility-first + DaisyUI components |
70+
| JavaScript | Bootstrap bundle | Alpine.js (shared via `xoops_lib/Frameworks/alpine/`) |
71+
| End-user install | Drop-in (ships compiled CSS) | Drop-in (ships compiled CSS) |
72+
| Developer rebuild | N/A (no build step) | Optional, via `npm run build` |
73+
| Dark mode | `data-bs-theme` attribute | `data-theme` attribute |
74+
| RTL | Bootstrap logical props | Tailwind logical props |
75+
| Form renderer | `XoopsFormRendererBootstrap5` | `XoopsFormRendererTailwind` (native DaisyUI) |
76+
77+
## Known Limitations (Proof of Concept)
78+
79+
- **Module templates not included** — only core theme templates are provided. Module overrides (newbb, publisher, wggallery, etc.) still need to be rewritten from the xSwatch5 Bootstrap versions.
80+
- **Admin toolbar** — not yet ported from xSwatch5.
81+
- **Cookie consent** — not yet ported.
82+
- **Slider / jumbotron alternatives** — basic hero section included; full slider not ported.
83+
84+
## Customization
85+
86+
- **Custom styles** — edit `css/input.css` and use Tailwind's `@apply` directive or raw CSS in the appropriate `@layer`. Rebuild with `npm run build`.
87+
- **Enable/disable themes** — edit `daisyui.themes` in `tailwind.config.js` and `$daisyThemes` in `theme_autorun.php`. Each enabled theme adds ~2-3 KB to the compiled CSS.
88+
- **Custom color palette** — add a custom theme to `tailwind.config.js` under `daisyui.themes` with your own primary/secondary/accent colors. See [DaisyUI theming docs](https://daisyui.com/docs/themes/).
89+
90+
## Requirements
91+
92+
### End users (site administrators)
93+
- XOOPS 2.5.11+ (RTL auto-detection requires 2.5.12+)
94+
- PHP 8.2+
95+
- `XoopsFormRendererTailwind` class in XOOPS core is **recommended** (shipped with XOOPS 2.5.13+). If your XOOPS version doesn't include it, the theme automatically falls back to the Bootstrap 5 form renderer — forms will still work and look mostly correct because DaisyUI aliases most Bootstrap 5 form classes. For pixel-perfect form styling, add `XoopsFormRendererTailwind.php` to `htdocs/class/xoopsform/renderer/` manually.
96+
97+
### Developers (only if modifying and rebuilding the theme)
98+
- Node.js 18+
99+
100+
## Credits
101+
102+
- Adam Wathan and team — [Tailwind CSS](https://tailwindcss.com/)
103+
- Saadeghi — [DaisyUI](https://daisyui.com/)
104+
- Caleb Porzio — [Alpine.js](https://alpinejs.dev/)
105+
- XOOPS Project — template integration patterns
106+
107+
## License
108+
109+
GPL v3 — see the XOOPS project license. Third-party assets are MIT-licensed.

0 commit comments

Comments
 (0)