rill icon indicating copy to clipboard operation
rill copied to clipboard

WIP: Tailwind CSS v4 migration (incomplete)

Open ericpgreen2 opened this issue 1 month ago • 0 comments

Major changes in this migration attempt:

Package updates:

  • Upgraded tailwindcss to v4.1.0
  • Added @tailwindcss/vite plugin v4.1.0
  • Removed autoprefixer (handled by v4)

Build configuration:

  • Removed postcss.config.cjs from all packages (v4 handles internally)
  • Updated vite configs to use @tailwindcss/vite plugin
  • Switched from svelte-preprocess to vitePreprocess in svelte.config.js

Svelte components (187 files):

  • Added @reference "tailwindcss" directive to all
  • Required for @apply and theme() to work in component styles

CSS updates:

  • Changed from @tailwind directives to @import "tailwindcss"
  • Fixed custom utility classes that used @apply on other custom classes
  • Created theme.css with @theme directive (incomplete)

Current blockers:

  • Complex color system (506 CSS variables, dynamic light/dark switching)
  • @theme definitions incomplete - colors not being recognized
  • Need to decide on full migration strategy vs simplified color system

This commit saves progress for future reference. Build currently fails. Not ready for production.

ericpgreen2 avatar Nov 06 '25 22:11 ericpgreen2