Replace Bootstrap with Tailwind CSS + Alpine.js #14

clawbot · 2026-03-01T19:19:52+01:00

clawbot commented

2026-03-01 19:19:52 +01:00

Summary

Replaces Bootstrap CSS/JS framework with Tailwind CSS v4 + Alpine.js, matching the µPaaS UI pattern.

Changes

Removed Bootstrap — all Bootstrap CSS/JS references removed from templates
Added Tailwind CSS v4 — static/css/input.css with Material Design inspired theme, compiled to static/css/tailwind.css
Added Alpine.js 3.14.9 — vendored as static/js/alpine.min.js for reactive UI components
Rewrote all templates to use Tailwind utility classes:
- base.html — new layout structure with footer, matches µPaaS pattern
- htmlheader.html — Tailwind CSS link, [x-cloak] style
- navbar.html — Alpine.js mobile menu toggle, responsive design
- index.html — card-based dashboard with Tailwind classes
- login.html — centered login form with Material Design styling
- profile.html — clean profile layout
Added make css target — compiles Tailwind CSS using standalone CLI
Component classes in input.css — reusable .btn-primary, .card, .input, .alert-error etc.

Testing

make fmt ✅
make check (fmt-check, lint, test, build) ✅
docker build . ✅

closes #4

## Summary Replaces Bootstrap CSS/JS framework with Tailwind CSS v4 + Alpine.js, matching the µPaaS UI pattern. ## Changes - **Removed Bootstrap** — all Bootstrap CSS/JS references removed from templates - **Added Tailwind CSS v4** — `static/css/input.css` with Material Design inspired theme, compiled to `static/css/tailwind.css` - **Added Alpine.js 3.14.9** — vendored as `static/js/alpine.min.js` for reactive UI components - **Rewrote all templates** to use Tailwind utility classes: - `base.html` — new layout structure with footer, matches µPaaS pattern - `htmlheader.html` — Tailwind CSS link, `[x-cloak]` style - `navbar.html` — Alpine.js mobile menu toggle, responsive design - `index.html` — card-based dashboard with Tailwind classes - `login.html` — centered login form with Material Design styling - `profile.html` — clean profile layout - **Added `make css` target** — compiles Tailwind CSS using standalone CLI - **Component classes** in `input.css` — reusable `.btn-primary`, `.card`, `.input`, `.alert-error` etc. ## Testing - `make fmt` ✅ - `make check` (fmt-check, lint, test, build) ✅ - `docker build .` ✅ closes #4

clawbot added the

bot

needs-review

labels 2026-03-01 19:19:52 +01:00

clawbot added 1 commit 2026-03-01 19:19:53 +01:00

Replace Bootstrap with Tailwind CSS + Alpine.js

check / check (push) Successful in 1m13s

Details

56c032a63f

- Remove all Bootstrap CSS/JS references from templates
- Add Tailwind CSS v4 with Material Design inspired theme (input.css)
- Compile tailwind.css with standalone CLI (committed to repo)
- Vendor Alpine.js 3.14.9 for reactive UI components
- Rewrite base.html to match µPaaS layout structure
- Rewrite htmlheader.html with Tailwind CSS link
- Rewrite navbar.html with Alpine.js mobile menu toggle
- Convert index.html to Tailwind utility classes
- Convert login.html to Tailwind utility classes
- Convert profile.html to Tailwind utility classes
- Add make css target for Tailwind compilation
- Add footer template with project links

closes #4

clawbot commented

2026-03-01 19:54:38 +01:00

Review: PASS ✅

Reviewed PR #14 (closes #4) — Bootstrap → Tailwind CSS v4 + Alpine.js migration.

Checklist

✅ All Bootstrap references removed — zero occurrences of bootstrap, jsdelivr, cdn, or any CDN URLs in templates or static assets. Old style.css replaced with a single-line comment pointing to input.css.
✅ Tailwind CSS v4 compiled and working — static/css/tailwind.css is a properly compiled Tailwind v4.0.14 output (23KB minified). static/css/input.css defines a clean Material Design-inspired theme with custom color palette, elevation shadows, and @layer components for reusable classes (btn-primary, btn-secondary, btn-danger, btn-text, card, card-elevated, input, label, form-group, badge-*, app-bar, alert-*).
✅ Alpine.js vendored locally — static/js/alpine.min.js (44KB, v3.14.9) loaded via <script defer src="/s/js/alpine.min.js"> in base.html. No CDN references anywhere.
✅ Templates use consistent Tailwind utility classes — All 6 templates (base.html, htmlheader.html, navbar.html, index.html, login.html, profile.html) rewritten with Tailwind utilities. Responsive design via md: breakpoints. Alpine.js x-data, x-show, x-cloak, @click for mobile menu toggle.
✅ make css target works — Makefile has css: target running tailwindcss -i static/css/input.css -o static/css/tailwind.css --minify.
✅ .golangci.yml NOT modified — confirmed via diff, no changes.
✅ Tests NOT weakened — confirmed via diff, zero test file changes.
✅ docker build . passes — full build including make check (fmt-check, lint, test, build) succeeded.

Notes

Branch is already up-to-date with main (no rebase needed).
Clean single-commit PR with 12 files changed (+325 / -289 lines).
Good separation: input.css for design tokens and component classes, compiled tailwind.css for production, vendored alpine.min.js for interactivity.

Marking as merge-ready.

## Review: PASS ✅ Reviewed PR [#14](https://git.eeqj.de/sneak/webhooker/pulls/14) (closes [#4](https://git.eeqj.de/sneak/webhooker/issues/4)) — Bootstrap → Tailwind CSS v4 + Alpine.js migration. ### Checklist - ✅ **All Bootstrap references removed** — zero occurrences of `bootstrap`, `jsdelivr`, `cdn`, or any CDN URLs in templates or static assets. Old `style.css` replaced with a single-line comment pointing to `input.css`. - ✅ **Tailwind CSS v4 compiled and working** — `static/css/tailwind.css` is a properly compiled Tailwind v4.0.14 output (23KB minified). `static/css/input.css` defines a clean Material Design-inspired theme with custom color palette, elevation shadows, and `@layer components` for reusable classes (`btn-primary`, `btn-secondary`, `btn-danger`, `btn-text`, `card`, `card-elevated`, `input`, `label`, `form-group`, `badge-*`, `app-bar`, `alert-*`). - ✅ **Alpine.js vendored locally** — `static/js/alpine.min.js` (44KB, v3.14.9) loaded via `<script defer src="/s/js/alpine.min.js">` in `base.html`. No CDN references anywhere. - ✅ **Templates use consistent Tailwind utility classes** — All 6 templates (`base.html`, `htmlheader.html`, `navbar.html`, `index.html`, `login.html`, `profile.html`) rewritten with Tailwind utilities. Responsive design via `md:` breakpoints. Alpine.js `x-data`, `x-show`, `x-cloak`, `@click` for mobile menu toggle. - ✅ **`make css` target works** — Makefile has `css:` target running `tailwindcss -i static/css/input.css -o static/css/tailwind.css --minify`. - ✅ **`.golangci.yml` NOT modified** — confirmed via diff, no changes. - ✅ **Tests NOT weakened** — confirmed via diff, zero test file changes. - ✅ **`docker build .` passes** — full build including `make check` (fmt-check, lint, test, build) succeeded. ### Notes - Branch is already up-to-date with `main` (no rebase needed). - Clean single-commit PR with 12 files changed (+325 / -289 lines). - Good separation: `input.css` for design tokens and component classes, compiled `tailwind.css` for production, vendored `alpine.min.js` for interactivity. Marking as `merge-ready`.

clawbot added

merge-ready

and removed

bot

needs-review

labels 2026-03-01 19:54:46 +01:00

sneak was assigned by clawbot

2026-03-01 19:55:00 +01:00

sneak merged commit 011ec270c2 into main

2026-03-02 00:42:29 +01:00

sneak deleted branch feature/tailwind-alpine

2026-03-02 00:42:29 +01:00