migrate to tailwind 4

[codingfrog27]

Labs Tailwind 4.0 Migration

Migrating labs from TW 3 to 4, both for stack maintenance and to remove version drift blocking the monorepo merge

What to test:

Besides checking the files for code quality an extra visual check through the websites to make sure I didn't miss anything would be appreciated. :)

Changes made

• tailwind.ts -> styles/theme.css : TW4 deprecates the JS config format and moves to CSS-first. Config moved accordingly.
  • Also deleted deprecated plugins/functions
    • ExportColorsasCssVariables since theme colours are now exposed as native CSS
    • SiteThemes is now also plain CSS
• @astrojs/tailwind replaced by @tailwindcss/vite: TW 4 now ships as a Vite plugin and drops Astro integration, luckily Astro 5 natively supports it still. did need to add extra stylesheet import to shell.astro
  • Relatedly stylesheets now get processed seperately so the 4 files with @apply now have an added @reference pointing to their relevant stylesheet.
• Layers: TW 4 introduces a layer system, which now has hierarchy over specificity . Our <style is:global> blocks were unlayered and started being put on top of everything else. So wrapped said block in `@layer base
  • Ported the typography plugin config (prose link colours, and disabling the plugin's code-block styling so there's no backticks in codeblocks). From Shell.astro to theme.css for the same reason.
• Changed the colour values: in ProductFilter.svelte to comply with V4, which now uses native CSS
• new syntax: Renamed classes in around 60 places for new version syntax, these are the majority of the file changes.
• Cleanup: Removed unused classes: specifiers like: pt-42, flex-2, w-4.5/h-4.5, px-30 were
  invalid in TW 3 so they did nothing. In V4 they now would have so I've removed them. If these were intentional we could still keep them. Though we should make sure to visually check all affected pages.

Review file guide

This PR features a lot of file changes but most of them are small syntax changes, I've categorized the files for easier reviewing:

Area	Files	Review effort
Config: JS to CSS	packages/astro-theme/styles/theme.css (new), packages/astro-theme/tailwind.ts (deleted), sites/*/tailwind.config.cjs (5, deleted), sites/labs/postcss.config.cjs (deleted)	Read carefully. The whole migration is here
Integration + stylesheet import	packages/astro-theme/index.ts, packages/astro-theme/layouts/Shell.astro	Read carefully. Small but load-bearing
Dependencies	packages/astro-theme/package.json, sites/*/package.json` (5)	Quick check
@reference for @apply	packages/astro-theme/layouts/BlogPost.astro, packages/astro-theme/layouts/DemoArticle.astro, packages/astro-theme/lib/callout.css, packages/astro-theme/lib/terminal-os-tabs.css	Quick check, mechanical
Colour format fix	sites/labs/src/components/ProductFilter.svelte	Quick check
Mechanical class renames	21 in packages/astro-theme/, 8 in sites/labs/, 3 in sites/cheerpx/, 2 in sites/cheerpj/, 1 in sites/cheerp/	Skim. One or two tokens per file
Lockfile	pnpm-lack.yaml	Skip. Generated

Visual changes observed:

• EDIT: Before was a note about space between main heading and body text on landing pages being tightened, but I've since fixed this 👌
• No styles on mobile hover anymore: Intentional TW change, Previously you could hold your finger on the showcase items without pressing them, and the text would turn blue, this has been removed in the new version. But if we want we could still keep it

Preflight pins

at the bottom of the theme.css Theres a blog with a few elements that are currently pushed to maintain V3 behaviour. Added since they would cause small visual changes, so we can now without them easily flag any visual change as a potential bug.

• This does add a (low priority) task for a later date to remove these and update the affected tags, since the two --default-ring ones are likely to become deprecated in the future, and the rest would be for hygiene to fully put us on V4 defaults.

Other notes

• Due to CJ docs different deployment I haven't been able to see if there's any changes that wouldnt show up on local testing. Chance for bugs should be small but flagging just in case. (Also we should check if there's a plan for this with the CJ renewal).

[cloudflare-workers-and-pages]

Deploying labs-browserpod-previews with    Cloudflare Pages

Latest commit:	1c045ce
Status:	✅  Deploy successful!
Preview URL:	https://7478dbfe.labs-browserpod-previews.pages.dev
Branch Preview URL:	https://tailwind-updating.labs-browserpod-previews.pages.dev

View logs

[GabrielaReyna]

No issues with the code. The only noticeable thing, but minor is a change introduced by Tailwind 4 on how it performs gradient interpolations (only visible on cheerp index hero gradient and cheerpx last gradient section before the footer).

IMO this is minor and can be left like this.

[codingfrog27]

Thanks for pointing out the colour changes Gaby! I looked into it and found some other changes here's what I changed:

New commit changes

• 32 gradient classes across 10 files go from bg-gradient-to-* to bg-linear-to-*/srgb, to maintain the gradient colours of V3

Changes accepted on purpose:

On first implementation I also overwrote the colour codes of tailwinds default pallete shades to match V3 exactly But on second thought I think it's better to accept these small changes instead. Since most of these pins had no affect, or were very minor. So they didn't seem worth creating a mismatch of V3 and V4's colours. Affected changes and URL's for finding them:

• The docs sidebar status icons https://cheerp.io/docs/getting-started/installation
• The note and warning callout boxes https://cheerpx.io/docs/guides/File-System-support
• the red badge on https://labs.leaningtech.com/blog/cheerpj-3-deep-dive

Spacing changes

Besides these there are also some small minor spacing changes introduced.

• https://cheerp.io/ and https://cheerpx.io/ In the section before the footer, the "Ready to build?" heading wraps onto one fewer line, and the buttons and divider move up 32px.
• Heading lines spaced much further apart on https://labs.leaningtech.com/submission (but not sure if this page will still be used in the future)

Happy to leave these as is, or fix them if preferred. :)