Adopt Tailwind v4 without changing the visual design#2
Merged
Conversation
Incremental adoption via @tailwindcss/vite (Astro 5's recommended path): - Move the global saloon styles out of Layout's <style is:global> into src/styles/global.css, organized into @layer base/components, with the design tokens bridged into @theme so utilities (text-brass-hi, font-display, etc.) exist alongside the original var(--brass) references. - Skip Preflight on purpose — the design leans on browser-default typography, so resetting it would shift spacing. Declare the layer order explicitly so utilities still win over base/components. - Convert the inline style= attributes on index/roulette to utility classes (the --i hole rotation vars stay as inline custom properties). Verified pixel-identical: 0 px difference on / and /roulette?demo=1 at 1400x2200 (see spike/shots.mjs for the screenshot helper). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Incrementally migrates the Astro 5 project to Tailwind v4 while aiming to keep the current visual design unchanged, by introducing Tailwind’s theme/utilities layers, bridging existing design tokens into @theme, and swapping a few inline styles for utility classes.
Changes:
- Add Tailwind v4 via
@tailwindcss/vite(Astro/Vite plugin) and include Tailwind theme + utilities CSS while intentionally skipping Preflight. - Move prior global styles from
Layout.astro’s<style is:global>intosrc/styles/global.css, with explicit cascade layer ordering and token bridging via@theme. - Replace selected inline styles in
index.astro/roulette.astrowith Tailwind utility classes; add a Playwright screenshot helper script.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/styles/global.css | New Tailwind v4 entry CSS; defines cascade layers, bridges tokens via @theme, and contains prior global/base/component styles. |
| src/layouts/Layout.astro | Imports the new global stylesheet and removes the in-layout global <style is:global> block. |
| src/pages/index.astro | Replaces a few inline styles with Tailwind utility classes (spacing/layout/text). |
| src/pages/roulette.astro | Replaces inline text alignment and color with Tailwind utilities. |
| spike/shots.mjs | Adds a Playwright-based screenshot helper for pixel-diff verification. |
| astro.config.mjs | Enables Tailwind v4 through the @tailwindcss/vite plugin. |
| package.json | Adds tailwindcss and @tailwindcss/vite dev dependencies. |
| package-lock.json | Locks Tailwind v4 and related dependency graph updates. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
17
to
21
| "devDependencies": { | ||
| "playwright": "^1.60.0" | ||
| "@tailwindcss/vite": "^4.3.0", | ||
| "playwright": "^1.60.0", | ||
| "tailwindcss": "^4.3.0" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Qué hace
Adopción incremental de Tailwind v4 en el proyecto (Astro 5) sin cambiar el aspecto — verificado pixel a pixel.
Cambios
@tailwindcss/viteenastro.config.mjs(vía actual para Astro 5; la integración@astrojs/tailwindestá deprecada para v4).src/styles/global.css: los estilos globales salen del<style is:global>del Layout a@layer base/components, con los tokens de diseño puenteados a@theme→ existen utilidades (text-brass-hi,font-display,bg-paper…) y a la vez losvar(--brass)existentes siguen resolviendo.<p>, etc.); el reset de Tailwind habría movido el espaciado. Se importan solotheme+utilities.@layer theme, base, components, utilities;) para que las utilidades ganen la cascada sobre base/components.style=inline → utilidades enindex.astroyroulette.astro(text-center,mb-4,flex-1,w-full,-mt-4…). Los--ide los agujeros del tambor se quedan como custom properties inline.Verificación
Diff de píxeles real (canvas) entre antes/después a 1400×2200:
//roulette?demo=1El proceso destapó un bug de cascada (utilities importadas antes de base/components perdían precedencia → la mode-card se desplazaba ~6.4px); corregido con el orden de capas explícito.
Build de producción OK; CSS final ~7.9K (tree-shaken).
spike/shots.mjsqueda como helper de screenshots para re-comparar en el futuro.Cómo probar en local
```bash
git checkout tailwind-migration
npm install
npm run dev # http://localhost:4321
```
🤖 Generated with Claude Code