tailwind v4 #481
tailwind v4 #481
Conversation
WalkthroughMigrates project from @astrojs/tailwind integration to Vite-based Tailwind using @tailwindcss/vite 4.1.16. Consolidates CSS configuration into src/styles/global.css, removes tailwind.config.ts, reorganizes CSS imports across multiple components, and reorders utility classes throughout the codebase. Changes
Sequence DiagramsequenceDiagram
actor Build as Build Process
rect rgb(230, 245, 230)
Note over Build: Old Flow (@astrojs/tailwind)
Build->>Astro: Load integration
Astro->>+Tailwind: @astrojs/tailwind plugin
Tailwind->>tailwind.config.ts: Read config
tailwind.config.ts-->>Tailwind: Colors, theme, extend
Tailwind->>CSS: Generate base/components/utilities
CSS-->>Astro: Apply styles
end
rect rgb(230, 240, 250)
Note over Build: New Flow (@tailwindcss/vite)
Build->>Vite: Initialize
Vite->>@tailwindcss/vite: Load plugin
@tailwindcss/vite->>src/styles/global.css: Read @theme & directives
src/styles/global.css-->>@tailwindcss/vite: CSS variables & config
@tailwindcss/vite->>CSS: Generate base/components/utilities
CSS-->>Vite: Apply styles
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Areas requiring attention:
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
✅ Deploy Preview for zero-to-nix ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (7)
src/components/mdx/NixStorePath.astro (1)
18-19: Tailwind v4 compatibility: prefer bracketed border width and verify custom tokens.
- Use border-[1.5px] instead of border-1.5 to avoid scale issues in v4.
- Ensure custom colors (light-gray, pale, cerulean, lilac) and bg-inherit/dark variants are defined in your @theme in global.css.
Apply:
- class="not-prose border-1.5 border-light-gray bg-pale dark:border-gray rounded-lg px-5 py-3 dark:bg-inherit" + class="not-prose border-[1.5px] border-light-gray bg-pale dark:border-gray rounded-lg px-5 py-3 dark:bg-inherit"As per Tailwind v4 notes.
Also applies to: 22-22
src/components/Link.astro (1)
30-33: Default no-underline can swallow caller intent; guard or document override.
- Callers (e.g., Features.astro) pass underline; this may not reliably win.
- Options:
- Document using underline! to override (important comes at end in v4: underline!).
- Or conditionally add no-underline only if caller didn’t request underline.
Proposed guard:
- <a {rel} {target} {...Astro.props} class="no-underline"> + <!-- Add above: const wantsUnderline = /\bunderline!?(\s|$)/.test((Astro.props.class ?? '')); --> + <a {rel} {target} {...Astro.props} class:list={[!wantsUnderline && 'no-underline', Astro.props.class]}>Please verify pages that require underlined links render correctly after this change. As per Tailwind v4 rules for the ! modifier.
Also applies to: 35-37
src/components/NixTerms.astro (1)
14-14: Use border-[1.5px] for v4 arbitrary width.Safer across v4 builds than border-1.5.
- class="border-1.5 border-light-gray hover:border-primary hover:bg-pale dark:border-gray dark:hover:border-primary dark:hover:bg-darker-gray rounded p-3 transition-colors duration-150 md:p-5 lg:p-7" + class="border-[1.5px] border-light-gray hover:border-primary hover:bg-pale dark:border-gray dark:hover:border-primary dark:hover:bg-darker-gray rounded p-3 transition-colors duration-150 md:p-5 lg:p-7"src/components/Features.astro (1)
29-30: Ensure underline wins against Link’s default no-underline.If Link applies no-underline by default, append underline! here (v4 important suffix) or adopt the conditional no-underline guard in Link.
- class="text-dark hover:text-primary dark:text-light-gray dark:hover:text-light-blue underline" + class="text-dark hover:text-primary dark:text-light-gray dark:hover:text-light-blue underline!"package.json (1)
27-29: @tailwindcss/vite should be moved to devDependencies; typography and prettier plugin versions are compatible with Tailwind v4.@tailwindcss/vite is a build-time tool and doesn't matter much in practice, but devDependencies is the semantically correct location. The typography plugin added explicit support for Tailwind v4 in recent releases, so update @tailwindcss/typography to a v4-compatible version; your pinned version 0.5.0-alpha.3 is appropriate. prettier-plugin-tailwindcss v0.6.11+ supports TypeScript configs and plugins when using v4, so v0.6.14 is compatible.
Recommended action: Move @tailwindcss/vite from dependencies to devDependencies.
src/components/mdx/H2.astro (1)
6-6: Remove redundant "no-underline" class from h2 element.The h2 wrapper does not need the
no-underlineclass since the Link component already applies it to the anchor element within. H2 elements do not naturally render with underlines—only the anchor text styling matters here.-<h2 {id} class="no-underline"> +<h2 {id}>src/styles/prose.css (1)
36-46: Consider reducing code duplication for inline code styling.The inline code styling (border, background, padding, dark mode) is duplicated between
.content code(lines 36-46) and.prose p, .content, h2, h3 { code }(lines 94-104). Consider extracting this into a shared mixin or custom property set if further duplication occurs.Example refactor using CSS custom properties:
@layer base { :root { --inline-code-border: 1px solid var(--light-gray); --inline-code-bg: var(--pale); --inline-code-padding: 0.125rem 0.375rem; --inline-code-radius: 0.25rem; } .dark { --inline-code-border: none; --inline-code-bg: var(--dark-gray); } .inline-code, .content code, .prose p code, .prose .content code, .prose h2 code, .prose h3 code { border: var(--inline-code-border); background-color: var(--inline-code-bg); padding: var(--inline-code-padding); border-radius: var(--inline-code-radius); } }Also applies to: 94-104
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (45)
astro.config.mjs(2 hunks)package.json(2 hunks)src/assets/css/main.css(0 hunks)src/assets/css/prose.css(0 hunks)src/assets/css/tailwind.css(0 hunks)src/assets/css/variables.css(0 hunks)src/components/Banner.astro(2 hunks)src/components/Breadcrumb.astro(1 hunks)src/components/CookieConsent.astro(2 hunks)src/components/Drawer.astro(3 hunks)src/components/DrawerToggler.astro(1 hunks)src/components/Dropdown.astro(2 hunks)src/components/ExternalSources.astro(1 hunks)src/components/Features.astro(1 hunks)src/components/FeedbackBar.astro(2 hunks)src/components/Footer.astro(3 hunks)src/components/Header.astro(1 hunks)src/components/HeaderLink.astro(1 hunks)src/components/Hero.astro(2 hunks)src/components/HorizontalContainer.astro(1 hunks)src/components/HoverableExternalSourceLink.astro(2 hunks)src/components/HoverableLink.astro(3 hunks)src/components/Link.astro(1 hunks)src/components/Navbar.astro(5 hunks)src/components/NixTerms.astro(1 hunks)src/components/PageSurvey.tsx(3 hunks)src/components/Pagination.astro(2 hunks)src/components/QuickStart.astro(2 hunks)src/components/Related.astro(1 hunks)src/components/Signup.astro(1 hunks)src/components/SignupModal.astro(2 hunks)src/components/Summary.astro(1 hunks)src/components/ThemeSwitcher.astro(2 hunks)src/components/mdx/Admonition.astro(4 hunks)src/components/mdx/H2.astro(1 hunks)src/components/mdx/Languages.astro(2 hunks)src/components/mdx/NixStorePath.astro(1 hunks)src/layouts/Layout.astro(2 hunks)src/pages/about.astro(1 hunks)src/pages/concepts/[slug].astro(1 hunks)src/pages/index.astro(4 hunks)src/pages/start/[slug].astro(1 hunks)src/styles/global.css(1 hunks)src/styles/prose.css(1 hunks)tailwind.config.ts(0 hunks)
💤 Files with no reviewable changes (5)
- src/assets/css/main.css
- src/assets/css/tailwind.css
- src/assets/css/variables.css
- tailwind.config.ts
- src/assets/css/prose.css
🧰 Additional context used
🪛 Biome (2.1.2)
src/styles/global.css
[error] 107-107: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test
🔇 Additional comments (34)
src/components/DrawerToggler.astro (1)
25-25: Class utility reordering is consistent and safe.The class attribute has been reordered for consistency across the codebase as part of the Tailwind v4 migration. Since utility order in the class attribute doesn't affect CSS output or rendering behavior, this change is purely presentational and aligns with the project's styling updates.
src/components/Breadcrumb.astro (1)
27-27: LGTM!The class reordering is cosmetic and doesn't affect the rendered output. In Tailwind, the order of utility classes in the HTML doesn't impact styling since CSS specificity is determined by the order in the generated stylesheet.
src/components/Related.astro (1)
15-15: LGTM! Class reordering is consistent with Tailwind v4 migration.The reordering of utility classes (moving hover states to the beginning) is purely organizational and doesn't affect functionality. The variant chaining in
dark:hover:text-light-grayis correct for Tailwind v4, applying dark mode first, then hover.src/components/ExternalSources.astro (1)
19-20: Custom utilities check after v4 migration.Class order change is fine. Also verify any custom utilities used nearby (e.g., remove-underline) are redefined in global.css under the new CSS‑first setup.
src/components/ThemeSwitcher.astro (1)
17-17: Verify custom utilities after Tailwind v4 migration.
- duration-hover isn’t a core Tailwind utility; confirm it’s redefined in global.css.
- Ensure text-yellow, text-dark-yellow, text-light-blue tokens exist via @theme.
Also applies to: 32-33
astro.config.mjs (1)
7-9: All verification checks passed—Tailwind/Vite setup is correct.CSS imports and @theme tokens are present in global.css; @tailwindcss/typography (0.5.0-alpha.3) is properly paired with v4; vite plugins correctly configure tailwindcss with typography plugin. No changes needed.
src/components/Hero.astro (1)
103-103: LGTM - Button styling preserved.The class reordering maintains the same visual styling while following a consistent ordering pattern used throughout the migration.
src/components/Dropdown.astro (1)
15-15: LGTM! Class reordering aligns with Tailwind v4 migration.The class order adjustments are purely cosmetic and don't affect functionality. All Tailwind v4 syntax requirements are met.
Also applies to: 24-24, 32-32
src/components/CookieConsent.astro (1)
12-12: LGTM! Class reordering aligns with Tailwind v4 migration.All class order adjustments are purely presentational and maintain the same functionality.
Also applies to: 26-26, 29-29, 35-35
src/components/SignupModal.astro (1)
11-11: LGTM! Class reordering aligns with Tailwind v4 migration.These class order adjustments are purely presentational.
Also applies to: 17-17
src/components/Drawer.astro (1)
30-30: LGTM! Class reordering aligns with Tailwind v4 migration.All class adjustments maintain the same functionality and follow Tailwind v4 conventions.
Also applies to: 43-43, 55-55
src/components/QuickStart.astro (2)
8-8: LGTM! Class reordering aligns with Tailwind v4 migration.The class adjustments are presentational only and maintain functionality.
Also applies to: 11-11, 26-26
14-16: Nice improvement! Enhanced user guidance.The added text explaining the "x" button functionality improves UX by clarifying that closing the notification affects all concept docs.
src/styles/global.css (3)
1-4: LGTM! Correct Tailwind v4 setup.The new import syntax and plugin configuration follow Tailwind v4 conventions correctly.
6-96: LGTM! Comprehensive theme configuration.The CSS custom properties and
@themeblock provide a solid foundation for the design system. The configuration correctly maps color tokens, border widths, transitions, and other design tokens for Tailwind v4.
98-105: LGTM! Component layer and utility styles.The prose code styling fix and banner-link utility are well-structured.
Also applies to: 109-121
src/components/PageSurvey.tsx (1)
48-48: LGTM! Class reordering aligns with Tailwind v4 migration.The className adjustments maintain the same functionality.
Also applies to: 56-56, 75-75
src/components/Pagination.astro (1)
34-34: LGTM! Class adjustments improve layout consistency.The reordering and addition of
flex justify-betweenutilities maintain proper functionality while improving the layout structure.Also applies to: 48-48
src/pages/about.astro (1)
23-23: Class reorder looks good.Purely presentational; no behavior change.
src/components/HeaderLink.astro (1)
17-17: No functional change.Whitespace-only; safe to keep.
src/components/Header.astro (1)
11-13: Formatting-only change.No behavioral impact.
src/pages/concepts/[slug].astro (1)
53-53: <!-- [scratchpad_start]
[task verify_review_comment]
Previous findings: xmax-w-none typo confirmed + opacity utilities found (ring-opacity-75, ring-opacity-5)
Current attempt: Failed to locate tailwind config/package.json via piped commands[observations]
- No output from fd/xargs pipe, likely command chain issue
- Need simpler direct approach to check tailwind version
- Original review asks only for typo verification in xmax-w-none
- But findings show additional v3 remnants that may need fixing
[pending]
- Confirm Tailwind v4 is actually in use (check package.json directly)
- Clarify scope: should new opacity utility issues be flagged?
[actions]
- Use simpler cat command on package.json directly
- Check if opacity utils are actual breakage or acceptable in this project's config
src/components/Banner.astro (2)
12-12: LGTM — class reordering only.
No behavior change.
30-30: No action required — custom utilityduration-hoveris properly defined.The custom utility is defined in src/styles/global.css at line 120 using
@applysyntax. The codebase consistently uses this utility across multiple components (Banner, Navbar, ThemeSwitcher, Footer, Dropdown), confirming it's a valid custom definition that extends Tailwind's default utilities.src/components/Navbar.astro (1)
32-33: LGTM — presentational-only reorders.Utility reordering aligns with Tailwind v4 migration; no behavioral changes observed.
Also applies to: 41-41, 51-51, 67-67, 88-88, 101-101
src/layouts/Layout.astro (2)
28-28: LGTM — class reordering only.
No behavior change.
7-7: ✓ Tailwind v4 setup verified.Global.css correctly imports Tailwind v4 and includes theme configuration. No issues found.
src/components/mdx/Languages.astro (1)
8-8: ****The
--graytoken is defined insrc/styles/global.css(line 19:--gray: #64748b;) and explicitly exposed in the@themeblock as--color-gray. Thedark:border-grayclass is valid and used consistently throughout the codebase (Signup.astro, PageSurvey.tsx, NixTerms.astro, HoverableExternalSourceLink.astro, Dropdown.astro, NixStorePath.astro, Languages.astro, and HoverableLink.astro). The pairing ofborder-soft-gray(light) +dark:border-gray(dark) is an established design pattern. No changes are required.Likely an incorrect or invalid review comment.
src/pages/index.astro (3)
26-31: LGTM! Consistent class ordering.The class reordering follows a logical pattern (color, size, weight, tracking, responsive) and is consistent with Tailwind v4 conventions.
47-49: LGTM! Hero button hover states properly configured.The addition of
hover:bg-orangeenhances the primary button interaction, and all hover variants follow Tailwind v4 syntax correctly.
67-77: LGTM! Proper variant ordering for dark mode hover states.The variant order
dark:hover:text-light-graycorrectly follows Tailwind v4's left-to-right evaluation (dark mode condition first, then hover state).src/components/mdx/Admonition.astro (2)
29-58: LGTM! Admonition container styling properly migrated to Tailwind v4.The class reordering and variant combinations (
dark:hover:bg-darker-gray) follow Tailwind v4's left-to-right evaluation correctly.
62-130: LGTM! Consistent icon class ordering.Icon classes have been consistently reordered from
size-* text-*totext-* size-*throughout the component, improving readability without affecting functionality.src/styles/prose.css (1)
1-47: Code uses correct Tailwind v4 syntax; no changes needed.Tailwind v4 still supports
@layer baseand Lightning CSS fully supports nested selectors. The@layer utilities→@utilitymigration applies only to utilities, not base styles. The nested syntax (.dark &) in lines 2-12 and 34-40 is correct and will work as expected with the v4 setup.Likely an incorrect or invalid review comment.
| <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base"> | ||
| <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base"> |
There was a problem hiding this comment.
Duplicate nested divs with identical classes.
Lines 81 and 82 both open <div> elements with identical class attributes. This appears to be a copy-paste error. The nested structure creates redundant styling and an unnecessary DOM layer.
Apply this diff to remove the duplicate inner div:
- <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base">
<div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base">
<div class="flex items-center space-x-2 md:space-x-3 lg:space-x-4">
{/* }<IconFaSolidHammer class="h-3 w-3 text-orange md:h-4 md:w-4" /> */}
<p>
This document is a work in progress. It's intended to provide a
brief definition or overview and nothing more. We'll be iterating
on this content heavily in the coming weeks and months.
</p>
</div>
</div>
- </div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base"> | |
| <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base"> | |
| <div class="bg:light-orange border-1.5 border-orange rounded px-3 py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base"> | |
| <div class="flex items-center space-x-2 md:space-x-3 lg:space-x-4"> | |
| {/* }<IconFaSolidHammer class="h-3 w-3 text-orange md:h-4 md:w-4" /> */} | |
| <p> | |
| This document is a work in progress. It's intended to provide a | |
| brief definition or overview and nothing more. We'll be iterating | |
| on this content heavily in the coming weeks and months. | |
| </p> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
In src/components/Hero.astro around lines 81-82 there are two nested <div>
openings with identical class attributes (duplicate nested divs from a
copy-paste); remove the redundant inner opening (and its matching closing tag)
so only one <div class="bg:light-orange border-1.5 border-orange rounded px-3
py-1.5 text-xs md:px-3.5 md:py-2 md:text-sm lg:px-4 lg:py-3 lg:text-base">
remains, preserving the inner content and closing tags to eliminate the extra
DOM layer and duplicate styling.
| <button | ||
| @click={`language = "${lang}"`} | ||
| class="rounded-lg px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none dark:border-1.5 md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg" | ||
| class="dark:border-1.5 rounded-lg px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg" |
There was a problem hiding this comment.
Border width + focus styles: tighten Tailwind v4 usage and a11y.
- Prefer dark:border-[1.5px] if border-1.5 isn’t recognized by your setup.
- Avoid removing focus outline; provide a visible focus indicator.
- class="dark:border-1.5 rounded-lg px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg"
+ class="dark:border-[1.5px] rounded-lg px-1.5 py-1 text-sm font-semibold tracking-tight focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/50 ring-offset-2 md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg"If you prefer to keep no ring, at least change to focus-visible:outline-hidden. As per Tailwind v4 and accessibility best practices.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/mdx/Languages.astro around line 19, replace the ambiguous
Tailwind class dark:border-1.5 with dark:border-[1.5px] and remove
focus:outline-none; then either add a visible focus style (e.g.,
focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[color]) or,
if you must keep no ring, use focus-visible:outline-hidden instead of
focus:outline-none so focus behavior follows Tailwind v4 accessibility patterns.
| {feedback && ( | ||
| <button | ||
| className="hoverName:text-pale rounded-lg bg-light-gray px-3 py-2 font-semibold text-dark hover:cursor-pointer hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray" | ||
| className="hoverName:text-pale bg-light-gray text-dark hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray rounded-lg px-3 py-2 font-semibold hover:cursor-pointer" |
There was a problem hiding this comment.
Critical: Fix typo in hover variant.
There's a typo in the className: hoverName:text-pale should be hover:text-pale. This invalid syntax will prevent the hover text color from applying.
Apply this diff to fix the typo:
- className="hoverName:text-pale bg-light-gray text-dark hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray rounded-lg px-3 py-2 font-semibold hover:cursor-pointer"
+ className="hover:text-pale bg-light-gray text-dark hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray rounded-lg px-3 py-2 font-semibold hover:cursor-pointer"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="hoverName:text-pale bg-light-gray text-dark hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray rounded-lg px-3 py-2 font-semibold hover:cursor-pointer" | |
| className="hover:text-pale bg-light-gray text-dark hover:bg-gray active:bg-rose dark:bg-gray dark:text-pale dark:hover:bg-dark-gray rounded-lg px-3 py-2 font-semibold hover:cursor-pointer" |
🤖 Prompt for AI Agents
In src/components/PageSurvey.tsx around line 90, the className contains a typo
"hoverName:text-pale" which is invalid Tailwind syntax; replace
"hoverName:text-pale" with "hover:text-pale" so the hover text color applies
correctly.
| name="subscribe" | ||
| id="mc-embedded-subscribe" | ||
| class="button !bg-light-gray text-lg !font-bold !text-dark hover:!bg-primary hover:!text-white" | ||
| class="button !bg-light-gray !text-dark hover:!bg-primary text-lg !font-bold hover:!text-white" |
There was a problem hiding this comment.
Critical: Update important modifiers to Tailwind v4 syntax.
Tailwind v4 requires the ! important modifier at the END of the utility name, not the beginning. The current syntax uses the old v3 format and will break.
Apply this diff to fix the syntax:
- class="button !bg-light-gray !text-dark hover:!bg-primary text-lg !font-bold hover:!text-white"
+ class="button bg-light-gray! text-dark! hover:bg-primary! text-lg font-bold! hover:text-white!"Based on library documentation (Tailwind v4 breaking changes).
🤖 Prompt for AI Agents
In src/components/SignupModal.astro around line 106, the class string uses
Tailwind v3-style leading '!' important modifiers which break in Tailwind v4;
update each utility that currently has a leading '!' so the '!' appears at the
end of the utility name (e.g., change "!bg-light-gray" to "bg-light-gray!",
"!text-dark" to "text-dark!", "hover:!bg-primary" to "hover:bg-primary!",
"!font-bold" to "font-bold!" and "hover:!text-white" to "hover:text-white!"),
leaving non-important utilities unchanged.
| <div | ||
| class="prose dark:prose-invert lg:prose-lg xl:prose-xl in-prose-headings:no-underline max-w-none" | ||
| > |
There was a problem hiding this comment.
Fix invalid Typography variant (use prose-headings).
Use prose-headings:no-underline; in‑prose‑headings is not a valid typography variant and won’t apply.
As per Tailwind v4 typography usage.
- class="prose dark:prose-invert lg:prose-lg xl:prose-xl in-prose-headings:no-underline max-w-none"
+ class="prose dark:prose-invert lg:prose-lg xl:prose-xl prose-headings:no-underline max-w-none"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| class="prose dark:prose-invert lg:prose-lg xl:prose-xl in-prose-headings:no-underline max-w-none" | |
| > | |
| <div | |
| class="prose dark:prose-invert lg:prose-lg xl:prose-xl prose-headings:no-underline max-w-none" | |
| > |
🤖 Prompt for AI Agents
In src/pages/start/[slug].astro around lines 50 to 52, the class uses the
invalid typography variant in-prose-headings:no-underline which won’t apply;
replace that token with the correct Tailwind v4 typography variant
prose-headings:no-underline so the heading underline removal is applied, i.e.,
update the class list to remove the "in-" prefix and use
"prose-headings:no-underline".
| } | ||
| } | ||
|
|
||
| @import "./prose.css"; |
There was a problem hiding this comment.
Critical: Move @import before @layer block.
The @import "./prose.css"; statement must appear before any @layer blocks or style rules. Per CSS specification, @import rules must precede all other valid at-rules and style rules (except @charset).
Apply this diff to fix the import order:
@theme {
/* ... theme configuration ... */
}
+@import "./prose.css";
+
@layer components {
.prose code {
&::before,
&::after {
content: "" !important;
}
}
}
-@import "./prose.css";
-
/* Mailchimp embed styling */As per static analysis hints (Biome lint/correctness/noInvalidPositionAtImportRule).
Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Biome (2.1.2)
[error] 107-107: This @import is in the wrong position.
Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
Consider moving import position.
(lint/correctness/noInvalidPositionAtImportRule)
🤖 Prompt for AI Agents
In src/styles/global.css around line 107, the @import "./prose.css"; is placed
after @layer blocks which violates CSS rules; move the @import statement to the
top of the file so it appears before any @layer blocks or other style rules
(after an optional @charset if present), ensuring the import is the first rule
to satisfy the Biome lint rule correctness/noInvalidPositionAtImportRule.
Summary by CodeRabbit
Chores
Style