Use canonical cases for tailwindcss classes

[CodeThomnics]

Use canonical cases for css classes suggested by the tailwind linting for less overhead.

Summary by CodeRabbit

• Style
  • Standardized image height sizing throughout the site, including project galleries, page headers, and blog content for improved visual consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for accessible-astro-starter-incluud ready!

Name	Link
🔨 Latest commit	6b5de91
🔍 Latest deploy log	https://app.netlify.com/projects/accessible-astro-starter-incluud/deploys/693c674e0b13450008b42ec5
😎 Deploy Preview	https://deploy-preview-166--accessible-astro-starter-incluud.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This pull request updates styling across multiple Astro components and MDX project files, primarily replacing fixed pixel-based height utilities (h-[250px]) with responsive height tokens (h-62.5 or h-h-62.5), and adjusting a margin utility in BreakoutImage.astro. No logic, data flow, or public API changes are introduced.

Changes

Cohort / File(s)	Summary
Component styling updates src/components/BreakoutImage.astro, src/components/PageHeader.astro	Updated utility classes: BreakoutImage margin changed from lg:-mx-[120px] to lg:-mx-30; PageHeader featured image height changed from h-[250px] to h-62.5.
Project content gallery images src/content/projects/project-0[1-7].mdx	Replaced four Image component height utilities from h-[250px] to h-h-62.5 (or h-62.5) in each project gallery; width, border-radius, and object-fit properties remain unchanged.
Blog post page images src/pages/blog/[post].astro	Updated four Image component height utilities from h-[250px] to h-62.5.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify that h-62.5 and h-h-62.5 are valid design system tokens (note: some project files use h-h-62.5, which appears to have a duplicated h- prefix that may warrant clarification)
• Confirm lg:-mx-30 is the intended utility value for BreakoutImage
• Spot-check one or two project files to ensure height changes render as expected across the portfolio

Possibly related PRs

• feat: add tags to project metadata #69 #164: Modifies src/components/PageHeader.astro props and breadcrumb logic; this PR updates the same component's featured image height styling.

Suggested reviewers

• markteekman

Poem

🐰 Hop, hop! The heights now dance,
From pixels bold to tokens grand,
Margins shifted, images refined,
A responsive design so aligned!
Gallery dreams in harmony blend,
Styling magic 'round each bend!

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: converting tailwindcss classes to their canonical (optimized) forms across multiple component and content files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (5)

src/pages/blog/[post].astro (1)

76-103: The h-62.5 utility in this file is correct; however, fix the h-h-62.5 typo in other files.

The images in [post].astro correctly use h-62.5, which is valid Tailwind v4 arbitrary syntax (generates height: 62.5). However, other files in the codebase use h-h-62.5 (a typo), which attempts to generate invalid CSS (height: h-62.5) and will be silently dropped by Tailwind. Update the 24 instances of h-h-62.5 across all project-XX.mdx files and ensure consistency by using h-62.5 everywhere.

src/content/projects/project-05.mdx (1)

24-53: Fix typo in Tailwind class: h-h-62.5 should be h-62.5.
The double h- prefix is invalid and prevents the height class from applying. The correct Tailwind class is h-62.5 (used elsewhere in the codebase). This typo appears in all project files (project-01 through project-07).

src/content/projects/project-02.mdx (1)

24-53: Remove the doubled prefix: change h-h-62.5 → h-62.5 across all Image components (lines 30, 37, 44, 51).

The class h-h-62.5 is not defined in the Tailwind configuration or custom stylesheets and is not a standard Tailwind class. This appears to be a typo; the correct Tailwind height class is h-62.5.

-    class="h-h-62.5 w-full rounded-lg object-cover"
+    class="h-62.5 w-full rounded-lg object-cover"

Note: This same typo appears in all project MDX files (project-01 through project-07).

src/content/projects/project-07.mdx (1)

24-53: Fix invalid height class h-h-62.5—it contains a double prefix and will not be recognized by Tailwind.
The h-h- prefix is malformed. Use either h-[62.5%] (arbitrary value syntax) for custom heights, or replace with an appropriate predefined Tailwind height utility.

src/content/projects/project-06.mdx (1)

24-53: h-h-62.5 is not a valid Tailwind utility and will silently fail to apply any height styling.

Neither h-h-62.5 (used in all 7 project files) nor the alternative h-62.5 pattern (in other components) exist in the Tailwind default spacing scale. The spacing value 62.5 is not defined by default, and the double h- prefix in the project files is malformed. Images using these classes will not receive the intended height constraint, breaking the layout grid.

Fix by using standard Tailwind values (h-60, h-64), extending Tailwind config with a custom 62.5% value, or applying inline styles.

🧹 Nitpick comments (3)

src/components/BreakoutImage.astro (1)

23-26: Confirm lg:-mx-30 is valid and matches the previous 120px breakout intent.
If -mx-30 isn’t generated, this becomes a no-op at lg and the breakout effect will change.

Consider either (a) keeping the explicit lg:-mx-[120px], or (b) defining a clear token (spacing or custom CSS var) that maps to the intended value and using that consistently.

src/content/projects/project-04.mdx (1)

24-52: h-h-62.5 looks inconsistent/possibly a typo vs h-62.5 used elsewhere—please confirm and align.

If this is unintentional, update to the same utility used elsewhere in the PR:

-    class="h-h-62.5 w-full rounded-lg object-cover"
+    class="h-62.5 w-full rounded-lg object-cover"

src/content/projects/project-03.mdx (1)

24-52: Standardize h-h-62.5 vs h-62.5 across MDX/components to avoid silent Tailwind drops.

Same suggested fix (if h-h-62.5 isn’t intentional/configured):

-    class="h-h-62.5 w-full rounded-lg object-cover"
+    class="h-62.5 w-full rounded-lg object-cover"

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e53585c and 6b5de91.

📒 Files selected for processing (10)

• src/components/BreakoutImage.astro (1 hunks)
• src/components/PageHeader.astro (1 hunks)
• src/content/projects/project-01.mdx (1 hunks)
• src/content/projects/project-02.mdx (1 hunks)
• src/content/projects/project-03.mdx (1 hunks)
• src/content/projects/project-04.mdx (1 hunks)
• src/content/projects/project-05.mdx (1 hunks)
• src/content/projects/project-06.mdx (1 hunks)
• src/content/projects/project-07.mdx (1 hunks)
• src/pages/blog/[post].astro (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: markteekman
Repo: incluud/accessible-astro-starter PR: 0
File: :0-0
Timestamp: 2025-12-07T13:13:40.778Z
Learning: The accessible-astro-starter project uses Prettier as its formatter, so formatting-related concerns about code style are handled automatically by Prettier.

🔇 Additional comments (2)

src/components/PageHeader.astro (1)

139-145: Keep image height utility consistent across the repo (h-62.5 vs h-h-62.5).
Right now, components use h-62.5 while some MDX uses h-h-62.5; one of these is likely wrong.

src/content/projects/project-01.mdx (1)

24-53: [rewritten review comment]
[classification tag]

[markteekman]

Hey @CodeThomnics! 👋

Thanks for taking the time to submit this PR and thinking about code quality improvements. I really appreciate the effort! 😊 However, I'm going to decline this PR for a few reasons:

Technical issue:
There's a typo in the project MDX files where h-[250px] is changed to h-h-62.5 (notice the double h- prefix), which would break the styling (this is an easy fix though and not the main reason).

Design decision:
More importantly, I actually prefer keeping the arbitrary values (like h-[250px]) in these specific cases. While Tailwind does generate the h-62.5 utilities correctly, here's why I think the arbitrary values are better:

• h-[250px] is immediately clear (250 pixels), while h-62.5 requires mental math to figure out the actual dimension (62.5 × 4px = 250px)
• These are image container heights that work with our specific image dimensions and use object-cover to crop appropriately. Using explicit pixel values makes the sizing relationship clearer.
• It's Tailwind best practice, arbitrary values are the recommended pattern for one-off values that don't need to be part of your design system
• We intentionally want these to be fixed dimensions that don't scale with user font-size preferences (images should maintain their layout integrity) for accessibility.
• The "overhead" of arbitrary values is negligible in Tailwind v4, both approaches generate essentially the same CSS.

Thanks again for your interest in the project! 🚀

[CodeThomnics]

Thanks @markteekman for reacting so quick. I will keep this in mind next time i commit something. I'm trying to understand the different repo's and this helps with that. Have a great day!