feat: upgrade all dependencies including Tailwind CSS v4 by lilith · Pull Request #68 · Spr-Aachen/Twilight

lilith · 2026-01-27T12:09:40Z

Summary

This PR upgrades all dependencies to their latest versions, including a major migration to Tailwind CSS v4.

Changes

Package Upgrades

Tailwind CSS 3.4.19 → 4.1.18 (major)
Astro 5.16.3 → 5.16.15
@astrojs/svelte 7.2.2 → 7.2.5
@iconify/svelte 4.2.0 → 5.2.1
@biomejs/biome 2.2.4 → 2.3.13
marked 16.4.2 → 17.0.1
remark-directive 3.0.1 → 4.0.0
remark-github-admonitions-to-directives 1.0.5 → 2.1.0
postcss-nesting 13.0.2 → 14.0.0
satori 0.18.4 → 0.19.1

Tailwind CSS v4 Migration

Removed tailwind.config.ts - configuration moved to CSS
Replaced @astrojs/tailwind integration with @tailwindcss/vite plugin
Updated main.css with:
- @import 'tailwindcss' instead of @tailwind directives
- @plugin '@tailwindcss/typography'
- @theme directive for breakpoints and transitions
- @custom-variant for dark mode
Simplified postcss.config.mjs

Utility Class Renames (per Tailwind v4 spec)

shadow-sm → shadow-xs
shadow → shadow-sm
rounded-sm → rounded-xs
rounded → rounded-sm
blur-sm → blur-xs
blur → blur-sm
And other renamed utilities across ~50 template files

Bug Fixes

Fixed incorrect client:load="svelte" syntax to client:load
Fixed PostForList type compatibility in archivePanel.svelte
Added @reference directive for @apply in component styles (required by Tailwind v4)

Test Plan

pnpm check passes with 0 errors
Dev server starts successfully
Pages load without errors
Visual regression testing recommended

Notes

Tailwind v4 requires Safari 16.4+, Chrome 111+, Firefox 128+
The @tailwindcss/vite plugin is the recommended approach for Astro 5.2+ projects

Updated: - @fancyapps/ui 6.1.8 → 6.1.9 - @iconify-json/material-symbols 1.2.52 → 1.2.53 - katex 0.16.27 → 0.16.28 - svelte 5.47.1 → 5.48.3 - unist-util-visit 5.0.0 → 5.1.0

Major version bump. API remained compatible - Icon component usage unchanged. Tested with astro check: 0 errors.

Major version bump. Breaking changes relate to list tokenizer internals (checkbox tokens, list item renderer). No direct usage in codebase - used as transitive dep. Tested: 0 errors.

Also upgrades remark-github-admonitions-to-directives 1.0.5 → 2.1.0 remark-directive v4 changes label handling (whitespace before label no longer splits it from directive name). No breaking changes for this codebase's usage patterns.

Breaking changes in v14: - edition '2024-02' is now the default (uses :is() pseudo-class for specificity matching native CSS nesting behavior) - Node.js v18+ required The project uses tailwindcss/nesting wrapper which delegates to postcss-nesting, so this ensures CSS nesting follows the latest spec.

Patch release with bug fixes and improvements.

@theme

Major migration from Tailwind CSS v3 to v4: **Configuration changes:** - Removed tailwind.config.ts (config moved to CSS) - Replaced @astrojs/tailwind with @tailwindcss/vite plugin - Simplified postcss.config.mjs (removed postcss-nesting) - Added @theme directive in main.css for breakpoints/transitions **CSS changes:** - Replaced @tailwind directives with @import 'tailwindcss' - Added @plugin '@tailwindcss/typography' - Added @custom-variant for dark mode - Converted @layer components to @Utility directives **Template changes (automated by @tailwindcss/upgrade):** - shadow-sm → shadow-xs - shadow → shadow-sm - rounded-sm → rounded-xs - rounded → rounded-sm - blur-sm → blur-xs - blur → blur-sm - And other renamed utilities per v4 spec **Breaking changes addressed:** - Border color now defaults to currentColor (added compat layer) - Ring width changed from 3px to 1px default - Dark mode variant updated for v4 syntax Uses @tailwindcss/vite Vite plugin which is the recommended approach for Astro 5.2+ projects.

- @astrojs/svelte 7.2.2 → 7.2.5 - @biomejs/biome 2.2.4 → 2.3.13 - satori 0.18.4 → 0.19.1 Fixes: - Fixed incorrect client:load="svelte" syntax to just client:load - Fixed PostForList type compatibility in archivePanel.svelte (category field now accepts string | null | undefined)

@reference

Tailwind v4 requires @reference directive to access utilities when using @apply in component-level <style> blocks. - navLinks.astro: added @reference to ../../styles/main.css - base.astro: replaced @tailwind components with @reference

Foxie-404

While running pnpm build I got the following error:

[ERROR] [vite] ✗ Build failed in 1.99s
[@tailwindcss/vite:generate:build] Cannot apply unknown utility class `bg-white/50`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive
file: D:/Projekt/Code Projects/Twilight/fork/src/styles/anime.css
  Stack trace:
    at onInvalidCandidate (file:///D:/Projekt/Code%20Projects/Twilight/fork/node_modules/.pnpm/tailwindcss@4.1.18/node_modules/tailwindcss/dist/chunk-CT46QCH7.mjs:21:1314)
    at file:///D:/Projekt/Code%20Projects/Twilight/fork/node_modules/.pnpm/tailwindcss@4.1.18/node_modules/tailwindcss/dist/chunk-CT46QCH7.mjs:21:355
    at I (file:///D:/Projekt/Code%20Projects/Twilight/fork/node_modules/.pnpm/tailwindcss@4.1.18/node_modules/tailwindcss/dist/chunk-CT46QCH7.mjs:3:1377)
    at Wi (file:///D:/Projekt/Code%20Projects/Twilight/fork/node_modules/.pnpm/tailwindcss@4.1.18/node_modules/tailwindcss/dist/chunk-CT46QCH7.mjs:38:294)
    at async rf (file:///D:/Projekt/Code%20Projects/Twilight/fork/node_modules/.pnpm/tailwindcss@4.1.18/node_modules/tailwindcss/dist/chunk-CT46QCH7.mjs:38:1406)
❌ Build failed: Command failed: npx astro build

Seems like the css files need to update as well.

Spr-Aachen · 2026-01-30T02:10:31Z

I also found the sidebar behaviour got kaput:(

Spr-Aachen

Now that it should work as expected~

lilith added 9 commits January 27, 2026 02:58

chore: update minor/patch dependencies

89dada3

Updated: - @fancyapps/ui 6.1.8 → 6.1.9 - @iconify-json/material-symbols 1.2.52 → 1.2.53 - katex 0.16.27 → 0.16.28 - svelte 5.47.1 → 5.48.3 - unist-util-visit 5.0.0 → 5.1.0

chore: upgrade @iconify/svelte 4.2.0 → 5.2.1

4a11614

Major version bump. API remained compatible - Icon component usage unchanged. Tested with astro check: 0 errors.

chore: upgrade marked 16.4.2 → 17.0.1

d2404a4

Major version bump. Breaking changes relate to list tokenizer internals (checkbox tokens, list item renderer). No direct usage in codebase - used as transitive dep. Tested: 0 errors.

chore: upgrade remark-directive 3.0.1 → 4.0.0

124abe9

Also upgrades remark-github-admonitions-to-directives 1.0.5 → 2.1.0 remark-directive v4 changes label handling (whitespace before label no longer splits it from directive name). No breaking changes for this codebase's usage patterns.

chore: upgrade astro 5.16.3 → 5.16.15

09cc7a9

Patch release with bug fixes and improvements.

fix: add @reference for @apply in component styles

80c773f

Tailwind v4 requires @reference directive to access utilities when using @apply in component-level <style> blocks. - navLinks.astro: added @reference to ../../styles/main.css - base.astro: replaced @tailwind components with @reference

lilith force-pushed the main branch from 14f4219 to 80c773f Compare January 27, 2026 12:41

Spr-Aachen added the following up Tracking on this issue label Jan 28, 2026

Spr-Aachen requested a review from Foxie-404 January 28, 2026 02:35

Spr-Aachen added the enhancement New feature or request label Jan 28, 2026

Merge branch 'main' into main

2bc6067

Foxie-404 requested changes Jan 28, 2026

View reviewed changes

Foxie-404 requested a review from Spr-Aachen January 28, 2026 10:03

Spr-Aachen added 6 commits January 28, 2026 18:30

Remove scrambled text

f7c08b1

Remove blank endline

3a11450

Add @reference directive for Tailwind CSS in component styles

79d31c2

Migrate link styles

9bd7463

Update remained Tailwind CSS v3 conventions

9f23352

Remove duplicate line-clamp CSS classes

7a391c3

Spr-Aachen added 7 commits January 30, 2026 10:20

Normalize indentation

ad65d48

Fix playlist panel

85ce512

Replace 'transform' properties

22da774

Fix sidebar behaviour

0f47178

Adjust opacity of image overlay

adcbaef

Update packages

f3fcda6

Revert pio model

cbb789f

Spr-Aachen approved these changes Jan 31, 2026

View reviewed changes

Spr-Aachen added 3 commits January 31, 2026 20:26

Refactor breakpoints setting mechanism

a84f6ba

Update Milestones

98b6864

Remove animation-enhancements.css

c132165

Spr-Aachen merged commit 13e8e22 into Spr-Aachen:main Jan 31, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: upgrade all dependencies including Tailwind CSS v4#68

feat: upgrade all dependencies including Tailwind CSS v4#68
Spr-Aachen merged 26 commits intoSpr-Aachen:mainfrom
lilith:main

lilith commented Jan 27, 2026

Uh oh!

Foxie-404 left a comment

Uh oh!

Spr-Aachen commented Jan 30, 2026

Uh oh!

Spr-Aachen left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

lilith commented Jan 27, 2026

Summary

Changes

Package Upgrades

Tailwind CSS v4 Migration

Utility Class Renames (per Tailwind v4 spec)

Bug Fixes

Test Plan

Notes

Uh oh!

Foxie-404 left a comment

Choose a reason for hiding this comment

Uh oh!

Spr-Aachen commented Jan 30, 2026

Uh oh!

Spr-Aachen left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants