Migrate CSS to Tailwind utilities – Phase 2 (#89)

Issue #47 

This PR continues the gradual migration from custom CSS to Tailwind.

### Changes

**Build configuration**
- Consolidated Tailwind CSS into Vite-managed build pipeline
- Fixed double entrypoint: CSS was previously loaded via both Tailwind
CLI (`application.tailwind.css`) and Vite (`application.css`), causing
conflicts
- Single entrypoint: `application.js` imports `application.css`,
eliminating duplicate style loading
- Removed standalone Tailwind CLI setup (`application.tailwind.css`)
- Removed `@tailwindcss/cli` dependency (Vite handles Tailwind via
`@tailwindcss/vite` plugin)
- Removed `bin/tailwind-build` script (no longer needed)
- Updated asset pipeline to use Vite for CSS bundling
- Updated `Stylesheets` helper to exclude Vite-managed frontend
directory and legacy Tailwind builds directory

**CSS migrations**
- Migrated `flash.css` to Tailwind utilities in `application.html.erb`
- Migrated `.input--code` to Tailwind component class using `@apply`
- Added Tailwind utility class definitions for existing text and spacing
utilities (`txt-*`, `pad`, `margin-block`, `gap`)
- Consolidated color system and design tokens into `application.css`
theme

**Template updates**
- Replaced flash component classes with Tailwind utilities
- Updated several templates to use standard Tailwind classes
(`align-center` → `items-center`, `flex-column` → `flex-col`)

**Documentation**
- Updated `README.md` to use `bin/dev` and removed separate Tailwind
watch instructions
- Added migration status comments to `buttons.css` and `inputs.css`
- Documented which classes remain in CSS due to complexity (nested
selectors, pseudo-classes, CSS variables)

### What remains in CSS
- Button classes (`.btn` and modifiers) - nested selectors,
pseudo-classes, CSS variables
- Input classes (`.input`, `.input--actor`, `.input--file`) -
pseudo-classes, nested selectors
- Switch classes (`.switch`, `.switch__input`, `.switch__btn`) -
pseudo-elements

These classes use features like nested selectors, `:focus-within`,
`:has()`, `::before`/`::after` pseudo-elements, and CSS custom
properties that require more careful migration.

### Next steps
1. Continue migrating component-specific CSS files (`buttons.css`,
`inputs.css`)
2. Migrate complex component CSS (`messages.css`, `sidebar.css`,
`stats.css`, `navigation.css`)
3. Remove migrated CSS files once all usages are replaced
4. Final goal: eliminate all custom CSS files in favor of Tailwind
utilities

---
AI disclaimer: This PR was implemented with AI assistance (Claude Sonnet
4.5, gpt-5-codex, gpt-5-high) for code generation. All code was
self-reviewed and directed throughout the development process.

Author: gianfrancopiana

Dockerfile

@@ -16,7 +16,7 @@ ENV RAILS_ENV="production" \
 # Throw-away build stage to reduce size of final image
 FROM --platform=$TARGETPLATFORM base as build
 
-# Install packages need to build gems and Node.js for Tailwind
+# Install packages need to build gems and Node.js for Vite
 RUN apt-get update -qq && \
     apt-get install -y build-essential git pkg-config nodejs npm
 
@@ -27,9 +27,9 @@ RUN bundle install && \
 
 COPY . .
 
-# Install Node dependencies and build Tailwind CSS
+# Install Node dependencies and build assets with Vite
 RUN npm install && \
-    npx @tailwindcss/cli -i app/assets/stylesheets/application.tailwind.css -o app/assets/builds/tailwind.css
+    npm run build
 
 # Precompiling assets for production without requiring secret RAILS_MASTER_KEY
 RUN mkdir -p /rails/storage/logs

Procfile.dev

@@ -1,3 +1,3 @@
 
 vite: bin/vite dev
-web: bin/rails s
+web: PORT=3000 bin/rails s

README.md

@@ -28,23 +28,15 @@ bin/setup
 Start the app in development:
 
 ```bash
-bin/rails server
+bin/dev
 ```
 
-`vite_rails` is configured with `autoBuild: true`, and the layout includes the Vite tags; assets are compiled and served automatically, so Inertia and Tailwind work without a separate Vite process.
+This starts both the Rails server and Vite dev server using Foreman (via Procfile.dev).
 
-The `bin/setup` script installs Ruby gems and Node packages (via `npm install`), prepares the database, builds Tailwind CSS once, and configures the application.
+The `bin/setup` script installs Ruby gems and Node packages (via `npm install`), prepares the database, and configures the application.
 If you skip `bin/setup`, install frontend dependencies manually with `npm install`.
 
-Tailwind in this app is used in two places:
-
-- For Rails views (asset pipeline): if you edit files under `app/assets/stylesheets/**`, run:
-
-  ```bash
-  bin/tailwind-build --watch
-  ```
-
-- For Inertia/React pages (Vite): styles under `app/frontend/**` are processed automatically by Vite through `vite_rails` during development — no separate Tailwind watch needed.
+All CSS is managed through Vite. Tailwind processes styles from `app/frontend/entrypoints/application.css`, which is automatically rebuilt during development.
 
 ## Running in production
 

app/assets/stylesheets/application.tailwind.css

@@ -1,3 +1,7 @@
+/* PHASE 2 MIGRATION STATUS: Complex classes with nested selectors, CSS custom properties, and pseudo-classes */
+/* NOTE: Base button classes remain in CSS due to complexity (nested selectors, pseudo-classes, CSS variables) */
+/* Button modifier classes (.btn--reversed, .btn--negative, etc.) primarily set CSS variables */
+/* These work together with the base .btn class which handles the complex styling */
 :root {
   --btn-size: 2.65em;
   /* Define a slightly smaller size for the navbar action buttons */