Phase 1: Setup — Install Tailwind + shadcn-vue, Remove Bulma

Depends on: Phase T baselines captured
Result: Bulma fully removed, Tailwind + shadcn-vue installed and configured. App will be visually broken — that's expected.

Goal

Rip out Bulma and its SCSS pipeline. Install Tailwind CSS v4 + shadcn-vue. Establish the new theming system using the same color palette and dark mode approach.

Tasks

1. Record pre-migration bundle size

  • [ ] Record current bundle size for later comparison
cd front-end && pnpm build
du -sh dist/
# Record this number: ____________

2. Extract dark mode values before deleting SCSS

  • [ ] Read and save color values from src/scss/layout/_dark.scss
  • [ ] Read and save color values from src/scss/css-variables/_colors.scss
  • [ ] Read and save shadow values from src/scss/css-variables/_shadows.scss
  • [ ] Read and save radius values from src/scss/css-variables/_radius.scss
  • [ ] Read and save font values from src/scss/css-variables/_fonts.scss

Important: Do this BEFORE step 3 so you don't lose the dark mode color definitions.

3. Remove Bulma packages and SCSS pipeline

  • [ ] Remove Bulma packages
cd front-end
pnpm remove @cssninja/bulma-css-vars
# Also remove the `bulma` alias (aliased to @cssninja/bulma in package.json)
  • [ ] Delete front-end/src/scss/ (entire directory)
  • [ ] Delete front-end/bulma-css-vars.config.cjs
  • [ ] Remove build:update-bulma-colors from package.json scripts

4. Install Tailwind CSS v4 + shadcn-vue dependencies

  • [ ] Install Tailwind
cd front-end
pnpm add -D tailwindcss @tailwindcss/vite
  • [ ] Install shadcn-vue dependencies
pnpm add class-variance-authority clsx tailwind-merge radix-vue

5. Initialize shadcn-vue

  • [ ] Run shadcn-vue init
npx shadcn-vue@latest init

Configure with:

  • TypeScript: Yes
  • Framework: Vite
  • Style: New York
  • Base color: Slate
  • CSS variables for colors: Yes
  • Components path: src/components/ui
  • Utils path: src/lib/utils.ts

This creates:

  • src/components/ui/ directory
  • src/lib/utils.ts — cn() utility (clsx + tailwind-merge)
  • CSS variable theme file

6. Configure Tailwind

  • [ ] Update tailwind.config.ts (or equivalent for v4)
darkMode: 'class'
content: ['./index.html', './src/**/*.{vue,ts,js}']
// No prefix

7. Set up theming — map Bulma palette to shadcn CSS variables

  • [ ] Create/update src/css/app.css with Tailwind directives and shadcn theme

Map current colors:

Bulma VariableValue→ shadcn Variable
--primaryoklch(66.67% 0.146 173.07) (teal)--primary
--primary-invert(auto)--primary-foreground
--danger#e62864--destructive
--danger-invert(auto)--destructive-foreground
--dark#222225--foreground
--body-color#f4f4f5--background
--background-grey#fafafa--muted
--white#fff--card, --popover
--border#dbdbdb--border, --input
--link#485fc7--accent
--info#0398e2custom --info
--success#05d69ecustom --success
--warning#faad42custom --warning
  • [ ] Set dark mode overrides (.dark class) using values extracted in step 2

8. Set up dark mode

  • [ ] Update src/composables/darkmode.ts: change class toggle from .dark-mode → .dark on <html>
  • [ ] Keep localStorage persistence logic unchanged

9. Update style entry point

  • [ ] Update src/styles.ts

Replace:

import '@vueform/multiselect/themes/default.scss'
import './scss/main.scss'

With:

import './css/app.css'

10. Update Vite config

  • [ ] Add tailwindcss() from @tailwindcss/vite to plugins array in vite.config.ts
  • [ ] Remove any Bulma-specific plugins
  • [ ] Update/remove PurgeCSS config — Tailwind v4 handles its own purging (test if PurgeCSS plugin can be removed entirely)

11. Add custom Tailwind theme extensions

  • [ ] Extend theme in config with:
    • fontFamily.sans → Roboto Flex
    • fontFamily.heading → Montserrat
    • fontFamily.mono → Fira Code
    • colors.info / colors.success / colors.warning — semantic colors (shadcn only ships primary/secondary/destructive/muted)
    • borderRadius — map current radius values

12. Verify build compiles

  • [ ] pnpm test:tsc passes
  • [ ] pnpm build compiles (visual breakage expected — all Bulma classes are now meaningless)
  • [ ] Manually verify Tailwind utility classes work: add class="text-red-500" to any element, confirm it renders red

Files Created

FilePurpose
src/css/app.cssTailwind directives + shadcn theme variables
src/lib/utils.tscn() utility (created by shadcn init)
src/components/ui/Directory for shadcn components (empty, populated in Phase 2)
tailwind.config.tsTailwind configuration

Files Deleted

File/DirectoryReason
src/scss/Entire Bulma SCSS pipeline
bulma-css-vars.config.cjsBulma variable generator config

Files Modified

FileChange
package.jsonRemoved Bulma deps, added Tailwind + shadcn deps, removed bulma scripts
src/styles.tsReplaced SCSS imports with Tailwind CSS import
src/composables/darkmode.ts.dark-mode → .dark
vite.config.tsTailwind plugin, PurgeCSS cleanup

Checklist

  • [x] Pre-migration bundle size recorded
  • [x] Dark mode / theme values extracted before SCSS deletion
  • [x] Bulma packages removed from package.json
  • [x] src/scss/ directory deleted
  • [x] bulma-css-vars.config.cjs deleted
  • [x] Tailwind CSS v4 installed
  • [x] shadcn-vue initialized
  • [x] Tailwind configured (darkMode, content paths)
  • [x] Color palette mapped to shadcn CSS variables (light + dark)
  • [x] Dark mode composable updated (.dark-mode → .dark)
  • [x] styles.ts updated to import app.css
  • [x] Vite config updated with Tailwind plugin
  • [x] Font families configured in Tailwind
  • [x] Semantic colors (info, success, warning) added to theme
  • [x] pnpm test:tsc passes
  • [x] pnpm build compiles
  • [ ] Tailwind utility classes render correctly
  • [x] cn() utility works
  • [x] No references to Bulma packages in package.json
  • [x] No SCSS imports in styles.ts