Remove Tailwind from pal-e-app — pure CSS only #44

New issue

Closed

opened 2026-03-23 14:15:50 +00:00 by forgejo_admin · 1 comment

forgejo_admin commented

2026-03-23 14:15:50 +00:00

Owner

Type

Feature

Lineage

Standalone — board-pal-e-docs kanban MVP

Repo

forgejo_admin/pal-e-app

User Story

As the superuser
I want pal-e-app to use pure CSS custom properties and explicit styles with no Tailwind
So that playground→production is literal copy-paste and the design system is framework-free

Context

pal-e-app uses Tailwind 4 (@import 'tailwindcss' in app.css, @tailwindcss/vite plugin). But the real design system is the 120+ CSS custom properties in app.css. Tailwind is just adding utility shortcuts (flex, gap-2, rounded-lg, etc.) that break the playground→production pipeline. The playground uses pure CSS — .svelte files should too.

File Targets

Files to modify:

src/app.css — remove @import 'tailwindcss', replace with explicit utility classes
vite.config.ts — remove @tailwindcss/vite plugin
package.json — remove tailwindcss and @tailwindcss/vite dependencies
All .svelte files using Tailwind utility classes — replace with explicit CSS

Files NOT to touch:

CSS custom properties in app.css — these stay, they ARE the design system

Acceptance Criteria

No Tailwind imports or dependencies
All pages render identically before and after
CSS is pure custom properties + explicit classes
npm run build succeeds without Tailwind

Test Expectations

Visual regression: screenshot each route before/after
Run: npm run build && npm run preview

Constraints

Must be visually identical — this is a refactor, not a redesign
Replace Tailwind utilities with explicit CSS in component <style> blocks

Checklist

PR opened
Tests pass
No unrelated changes

project-pal-e-docs — pal-e-app is the frontend

### Type Feature ### Lineage Standalone — board-pal-e-docs kanban MVP ### Repo `forgejo_admin/pal-e-app` ### User Story As the superuser I want pal-e-app to use pure CSS custom properties and explicit styles with no Tailwind So that playground→production is literal copy-paste and the design system is framework-free ### Context pal-e-app uses Tailwind 4 (`@import 'tailwindcss'` in app.css, `@tailwindcss/vite` plugin). But the real design system is the 120+ CSS custom properties in app.css. Tailwind is just adding utility shortcuts (`flex`, `gap-2`, `rounded-lg`, etc.) that break the playground→production pipeline. The playground uses pure CSS — .svelte files should too. ### File Targets Files to modify: - `src/app.css` — remove `@import 'tailwindcss'`, replace with explicit utility classes - `vite.config.ts` — remove `@tailwindcss/vite` plugin - `package.json` — remove `tailwindcss` and `@tailwindcss/vite` dependencies - All `.svelte` files using Tailwind utility classes — replace with explicit CSS Files NOT to touch: - CSS custom properties in `app.css` — these stay, they ARE the design system ### Acceptance Criteria - [ ] No Tailwind imports or dependencies - [ ] All pages render identically before and after - [ ] CSS is pure custom properties + explicit classes - [ ] `npm run build` succeeds without Tailwind ### Test Expectations - [ ] Visual regression: screenshot each route before/after - Run: `npm run build && npm run preview` ### Constraints - Must be visually identical — this is a refactor, not a redesign - Replace Tailwind utilities with explicit CSS in component `<style>` blocks ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `project-pal-e-docs` — pal-e-app is the frontend

forgejo_admin commented

2026-03-23 19:30:20 +00:00

Author

Owner

Tailwind Audit Results

~90 unique utilities, 277+ usages across 23 .svelte files. Colors are already pure CSS vars — Tailwind is only layout/spacing/typography utilities.

Heaviest files (32-38 utilities each)

src/lib/components/NoteLayout.svelte
src/routes/projects/[slug]/+page.svelte
src/lib/components/QuickJot.svelte

Already clean (0 Tailwind)

src/routes/+page.svelte
src/routes/notes/[slug]/+page.svelte

Most common utilities to replace

flex, items-center, text-sm, text-xs, font-bold, no-underline, font-semibold, rounded-full

Migration phases

Block components (3-9 utilities each) — CodeBlock, ParagraphBlock, MermaidBlock, TableBlock
Medium pages (10-20 utilities) — Notes, Search, Repos, Edit, Dashboard, Boards list
Heavy components (32+) — NoteLayout, QuickJot, ProjectDetail
Layout — +layout.svelte

## Tailwind Audit Results ~90 unique utilities, 277+ usages across 23 .svelte files. Colors are already pure CSS vars — Tailwind is only layout/spacing/typography utilities. ### Heaviest files (32-38 utilities each) - `src/lib/components/NoteLayout.svelte` - `src/routes/projects/[slug]/+page.svelte` - `src/lib/components/QuickJot.svelte` ### Already clean (0 Tailwind) - `src/routes/+page.svelte` - `src/routes/notes/[slug]/+page.svelte` ### Most common utilities to replace `flex`, `items-center`, `text-sm`, `text-xs`, `font-bold`, `no-underline`, `font-semibold`, `rounded-full` ### Migration phases 1. Block components (3-9 utilities each) — CodeBlock, ParagraphBlock, MermaidBlock, TableBlock 2. Medium pages (10-20 utilities) — Notes, Search, Repos, Edit, Dashboard, Boards list 3. Heavy components (32+) — NoteLayout, QuickJot, ProjectDetail 4. Layout — +layout.svelte