Upgrade tailwind v4

[L4Ph]

This Pull Request contains breaking changes.

• Deleted postcss.config.mjs as it is no longer needed.
• Updated Layout.astro to reference main.css instead of using @tailwind components.
• Modified expressive-code.css to include a reference to Tailwind CSS.
• Reworked main.css to use @import for Tailwind and added custom variants and utilities.
• Updated markdown.css to reference main.css and adjusted anchor styles.
• Enhanced photoswipe.css and scrollbar.css with Tailwind references and applied important modifiers.
• Updated transition.css to include Tailwind reference.
• Removed tailwind.config.cjs as part of the cleanup.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
fuwari-yags	Ready	Preview	Comment	Aug 21, 2025 8:55am

[L4Ph]

Please check for any issues in the review and pnpm run preview. @saicaca

[saicaca]

It seems to be mostly fine, but I notice some small issues.

• The banner isn't expanding on the homepage.
• The cursor-pointer doesn't seem to be working on some buttons (the color/theme btn on navbar and the back-to-top btn).

[L4Ph]

1. about banner

The banner isn't expanding because... I believe it's due to how it's configured in config.ts like this:

banner: {
	enable: false,
	src: "assets/images/demo-banner.png", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
	position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
	credit: {
		enable: false, // Display the credit text of the banner image
		text: "", // Credit text to be displayed
		url: "", // (Optional) URL link to the original artwork or artist's page
	},
},

Setting enable: true made it display correctly.

2. about cursor-pointer

It turns out that cursor-pointer not working on buttons is actually a feature of Tailwind v4. It seems to have been intentionally removed. Should we adhere to Tailwind's approach or maintain consistency by automatically applying cursor-pointer to buttons? It's an extreme choice, but ultimately I think we'll have to choose one or the other.

https://github.com/tailwindlabs/tailwindcss/discussions/15203 https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor

[saicaca]

The banner isn't expanding because... I believe it's due to how it's configured in config.ts like this:

Sorry for not being clear. I meant that the banner should expand to 65vh on the homepage and remain at 30vh on other pages, which seems to have stopped working. This part of the code is a bit of a mess. If you find it confusing, you can leave it for me to check.

It turns out that cursor-pointer not working on buttons is actually a feature of Tailwind v4.

I hadn't heard about this, thanks for letting me know. I feel this change has made buttons less recognizable... I'd prefer to keep the old pointer cursor for now. Maybe we can add it back manually.

[L4Ph]

Would you mind handling the fine-tuning of behavior? I believe it would be most reliable to have saiaca handle the detailed UI/UX adjustments.