Remove Tailwind, implement plain CSS design system #10

Closed
opened 2026-05-09 18:44:21 +00:00 by forgejo_admin · 1 comment
Contributor

Type

Feature

Lineage

Standalone — discovered during production validation. Tailwind CSS build is broken in production (4.5KB output, all utility classes purged). Decided to replace with plain CSS rather than fix the Tailwind v4 content scanner.

Repo

ldraney/pal-enterprises

User Story

As a visitor or authenticated user
I want the site to render with proper styling
So that the landing page, login, and dashboard are usable and professional

Context

The tailwindcss-rails gem uses Tailwind v4 with automatic content detection (@import "tailwindcss"). During the Docker production build, assets:precompile runs the Tailwind scanner, but it fails to find ERB templates — producing a 4.5KB CSS file with only the base reset and ~10 utility classes. The HTML references ~30 unique Tailwind class combinations (bg-gray-50, text-indigo-600, shadow, max-w-5xl, etc.), none of which survive to production.

Rather than debug the Tailwind build pipeline, we're switching to plain CSS following the pal-e-playground design system adapted for Rails in the ror-css-guide. This eliminates the build step entirely — Propshaft serves static CSS with no compilation.

File Targets

Files the agent should modify or create:

  • Gemfile — remove tailwindcss-rails
  • app/assets/stylesheets/application.css — full design system (tokens, reset, layout, components)
  • app/views/layouts/application.html.erb — remove Tailwind stylesheet link, update body/nav classes
  • app/views/pages/home.html.erb — replace Tailwind utility classes with semantic classes
  • app/views/contacts/new.html.erb — replace Tailwind utility classes
  • app/views/contacts/_form.html.erb — replace Tailwind utility classes
  • app/views/sessions/new.html.erb — replace Tailwind utility classes
  • app/views/dashboard/index.html.erb — replace Tailwind utility classes
  • Procfile.dev — remove css: bin/rails tailwindcss:watch
  • README.md — update stack table

Files the agent should delete:

  • app/assets/tailwind/application.css
  • app/assets/builds/tailwind.css

Files the agent should NOT touch:

  • Dockerfileassets:precompile still runs, Propshaft handles static CSS
  • config/ — no initializer changes needed

Acceptance Criteria

  • Zero Tailwind dependencies in Gemfile or assets
  • All colors use var(--token) — zero hardcoded hex outside :root
  • CSS comments mark component boundaries with partial paths
  • Mobile-first layout at 390px, desktop breakpoint at 600px
  • Production Docker build serves styled pages with no CSS build step
  • Flash messages styled for notice and alert
  • Landing page has hero, feature cards, and contact form — visually complete
  • Login page renders the Keycloak sign-in button with proper styling
  • Dashboard page renders styled for authenticated users

Test Expectations

  • Visual: landing page renders styled at mobile (390px) and desktop (600px+)
  • Visual: login page shows styled Keycloak button
  • Visual: dashboard renders with cards/grid after login
  • Build: docker build succeeds and serves styled pages
  • Run command: docker build -t pal-enterprises . && docker run --rm -p 3000:80 pal-enterprises

Constraints

  • Follow conventions in https://forgejo.tail5b443a.ts.net/ldraney/ror-css-guide
  • Design tokens from pal-e-playground: Atkinson Hyperlegible font, --color-accent: #0366d6, --max-width: 48rem
  • One breakpoint at 600px, mobile-first
  • No Sass, no PostCSS, no build tooling — static CSS only
  • Use .form > .field pattern for forms, not classes on every input

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes
  • pal-enterprises — project this affects
  • ror-css-guide — CSS conventions reference
### Type Feature ### Lineage Standalone — discovered during production validation. Tailwind CSS build is broken in production (4.5KB output, all utility classes purged). Decided to replace with plain CSS rather than fix the Tailwind v4 content scanner. ### Repo `ldraney/pal-enterprises` ### User Story As a visitor or authenticated user I want the site to render with proper styling So that the landing page, login, and dashboard are usable and professional ### Context The `tailwindcss-rails` gem uses Tailwind v4 with automatic content detection (`@import "tailwindcss"`). During the Docker production build, `assets:precompile` runs the Tailwind scanner, but it fails to find ERB templates — producing a 4.5KB CSS file with only the base reset and ~10 utility classes. The HTML references ~30 unique Tailwind class combinations (`bg-gray-50`, `text-indigo-600`, `shadow`, `max-w-5xl`, etc.), none of which survive to production. Rather than debug the Tailwind build pipeline, we're switching to plain CSS following the pal-e-playground design system adapted for Rails in the [ror-css-guide](https://forgejo.tail5b443a.ts.net/ldraney/ror-css-guide). This eliminates the build step entirely — Propshaft serves static CSS with no compilation. ### File Targets Files the agent should modify or create: - `Gemfile` — remove `tailwindcss-rails` - `app/assets/stylesheets/application.css` — full design system (tokens, reset, layout, components) - `app/views/layouts/application.html.erb` — remove Tailwind stylesheet link, update body/nav classes - `app/views/pages/home.html.erb` — replace Tailwind utility classes with semantic classes - `app/views/contacts/new.html.erb` — replace Tailwind utility classes - `app/views/contacts/_form.html.erb` — replace Tailwind utility classes - `app/views/sessions/new.html.erb` — replace Tailwind utility classes - `app/views/dashboard/index.html.erb` — replace Tailwind utility classes - `Procfile.dev` — remove `css: bin/rails tailwindcss:watch` - `README.md` — update stack table Files the agent should delete: - `app/assets/tailwind/application.css` - `app/assets/builds/tailwind.css` Files the agent should NOT touch: - `Dockerfile` — `assets:precompile` still runs, Propshaft handles static CSS - `config/` — no initializer changes needed ### Acceptance Criteria - [ ] Zero Tailwind dependencies in Gemfile or assets - [ ] All colors use `var(--token)` — zero hardcoded hex outside `:root` - [ ] CSS comments mark component boundaries with partial paths - [ ] Mobile-first layout at 390px, desktop breakpoint at 600px - [ ] Production Docker build serves styled pages with no CSS build step - [ ] Flash messages styled for `notice` and `alert` - [ ] Landing page has hero, feature cards, and contact form — visually complete - [ ] Login page renders the Keycloak sign-in button with proper styling - [ ] Dashboard page renders styled for authenticated users ### Test Expectations - [ ] Visual: landing page renders styled at mobile (390px) and desktop (600px+) - [ ] Visual: login page shows styled Keycloak button - [ ] Visual: dashboard renders with cards/grid after login - [ ] Build: `docker build` succeeds and serves styled pages - Run command: `docker build -t pal-enterprises . && docker run --rm -p 3000:80 pal-enterprises` ### Constraints - Follow conventions in https://forgejo.tail5b443a.ts.net/ldraney/ror-css-guide - Design tokens from pal-e-playground: Atkinson Hyperlegible font, `--color-accent: #0366d6`, `--max-width: 48rem` - One breakpoint at 600px, mobile-first - No Sass, no PostCSS, no build tooling — static CSS only - Use `.form > .field` pattern for forms, not classes on every input ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `pal-enterprises` — project this affects - `ror-css-guide` — CSS conventions reference
Author
Contributor

Scope Review: NEEDS_REFINEMENT

Review note: review-1188-2026-05-09

Template is complete and all 12 file targets verified (10 to modify, 2 to delete). Traceability has one gap: the arch:rails-app label is used on 9 board items but has no backing architecture note in pal-e-docs.

  • [SCOPE] Create architecture note arch-rails-app for the Rails application component

All acceptance criteria are testable. No decomposition needed despite 10 file targets and 9 AC -- changes are tightly coupled (single atomic CSS framework swap). No blocking dependencies on the board.

## Scope Review: NEEDS_REFINEMENT Review note: `review-1188-2026-05-09` Template is complete and all 12 file targets verified (10 to modify, 2 to delete). Traceability has one gap: the `arch:rails-app` label is used on 9 board items but has no backing architecture note in pal-e-docs. - **[SCOPE]** Create architecture note `arch-rails-app` for the Rails application component All acceptance criteria are testable. No decomposition needed despite 10 file targets and 9 AC -- changes are tightly coupled (single atomic CSS framework swap). No blocking dependencies on the board.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ldraney/pal-enterprises#10
No description provided.