chore: upgrade tailwind to v4 #489
Conversation
WalkthroughUpgrades Tailwind to v4, adds PostCSS plugin config, replaces shared preset with app-specific tailwind config, introduces a new global CSS theming file (light/dark tokens and utilities), adds the global CSS to the blog build, and applies widespread Tailwind v4 class-syntax/token adjustments across many components. Changes
Sequence Diagram(s)sequenceDiagram
participant Build as Build Pipeline
participant PostCSS as PostCSS (.postcssrc.json)
participant Tailwind as Tailwind v4
participant GlobalCSS as libs/shared/assets/global.css
participant App as Blog App
Build->>PostCSS: load config
PostCSS->>Tailwind: initialize `@tailwindcss/postcss`
Tailwind->>GlobalCSS: process theme layers & utilities
GlobalCSS-->>Tailwind: provide CSS tokens & `@layer` base
Tailwind->>App: emit compiled CSS (v4 syntax)
App->>App: components use updated class tokens
note right of Tailwind: Class/token conversions applied (important-placement, linear gradients, var syntax)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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 |
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (6)
libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts (1)
36-38: Narrow theeslint-disable-lineto a specific ruleUsing a bare
// eslint-disable-linesuppresses all rules on this line, which can hide unrelated issues later. Prefer explicitly targeting the intended rule, e.g.:alias: 'alInfiniteSliderOf', // eslint-disable-line <rule-id> — alias required for structural directive syntaxor adjust the ESLint config so this alias pattern doesn’t require an inline disable.
libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-basic-node/roadmap-basic-node.component.ts (1)
62-72: Confirmangular-lovemargin and visual emphasis are intentional
angular-lovenow usesm-[4px]whileprimary/secondaryusem-[2px], and it gets a stronger gradient (bg-linear-to-r ... text-white). If this extra spacing/emphasis is not deliberate, consider aligning the margin with the other variants for consistency; otherwise this is fine as-is.tailwind.preset.js (1)
1-2: Either remove unused preset or confirm it isn’t referenced by any Tailwind configExporting an empty object here is harmless if no
tailwind.config.*files still include this preset, but it’s a bit misleading:
- If it’s no longer used, consider deleting
tailwind.preset.jsto avoid confusion.- If any config still has
presets: [require('./tailwind.preset')], they’ll effectively inherit an empty base, which may not be what you want after the v4 migration.A quick search for
tailwind.presetin the repo should confirm whether it’s safe to remove.libs/blog/shared/ui-card/src/lib/card-skeleton.component.ts (1)
38-40: Shadow tweak is fine; consider theming the skeleton backgroundReducing to
shadow-xsis a safe visual adjustment. GivenCardComponentnow usesbg-al-card, you may want the skeleton to use the same (bg-al-cardinstead ofbg-white) so it follows light/dark theme tokens consistently, unless the bright skeleton background is intentional.apps/blog/tailwind.config.js (1)
4-11: Config is valid, butcontentis redundant in Tailwind v4This minimal config works, but in Tailwind v4 the
contentoption is ignored in favor of automatic source detection and@sourcedirectives in CSS. You can safely drop thecontentarray here and keep onlythemeandpluginsfor a cleaner v4-style config, unless you plan to reintroduce@config-based behavior.libs/shared/assets/src/lib/styles/global.css (1)
1-156: Global Tailwind v4 theming setup looks solid; consider centralizing breakpoint tokens hereThe new
global.cssfollows Tailwind v4’s CSS‑first approach well:
@import 'tailwindcss';+@themedefine youral-*color tokens, backgrounds, shadows, and thePulsateanimation in one place.- Light/dark variants on
:rootand:root[data-theme='dark']align with thedata-themetoggling inapp-theme.store.ts, and@custom-variant darklets you keep usingdark:utilities.- The
al-scrollandal-linkutilities are reasonable global helpers and keep most layout styling inline in templates, which matches this repo’s preference for inline Tailwind classes. Based on learnings.Given multiple templates now use
max-w-(--breakpoint-xl), this file is a natural place to define--breakpoint-xlin the@themeblock if it isn’t already defined elsewhere, so the breakpoint width token is easy to discover and maintain.
📜 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)
apps/blog/.postcssrc.json(1 hunks)apps/blog/project.json(1 hunks)apps/blog/src/assets/i18n/en.json(1 hunks)apps/blog/tailwind.config.js(1 hunks)libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html(1 hunks)libs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.ts(1 hunks)libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts(2 hunks)libs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.ts(2 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card-skeleton.component.ts(1 hunks)libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss(1 hunks)libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html(1 hunks)libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.html(1 hunks)libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts(2 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html(3 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss(0 hunks)libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html(1 hunks)libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts(2 hunks)libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html(5 hunks)libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html(2 hunks)libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-subtitle/roadmap-dialog-subtitle.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.html(1 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-basic-node/roadmap-basic-node.component.ts(2 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-cluster/roadmap-cluster.component.ts(2 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-node-label/roadmap-node-label.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap/src/lib/components/vertical-connector-arrow/vertical-connector-arrow.component.ts(1 hunks)libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html(1 hunks)libs/blog/shared/ui-button/src/lib/button/button.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card-skeleton.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card.component.ts(3 hunks)libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.html(1 hunks)libs/blog/shared/ui-not-found/src/lib/not-found-page.component.ts(1 hunks)libs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.html(3 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts(1 hunks)libs/blog/shared/ui-tooltip/src/lib/ui-tooltip/ui-tooltip.component.ts(1 hunks)libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html(3 hunks)libs/shared/assets/src/lib/styles/global.css(1 hunks)libs/shared/assets/src/lib/styles/main.scss(0 hunks)package.json(2 hunks)tailwind.preset.js(1 hunks)
💤 Files with no reviewable changes (2)
- libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
- libs/shared/assets/src/lib/styles/main.scss
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-02-24T15:58:21.460Z
Learnt from: DDonochVA
Repo: HouseOfAngular/angular-love PR: 390
File: libs/blog/home/feature-home/src/lib/home-page/home-page.component.html:1-26
Timestamp: 2025-02-24T15:58:21.460Z
Learning: In the angular-love project, prefer using inline Tailwind classes over extracting them into separate CSS files, as it provides better visibility and maintains consistency with the codebase.
Applied to files:
libs/shared/assets/src/lib/styles/global.csslibs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.htmlapps/blog/tailwind.config.jslibs/blog/roadmap/ui-roadmap/src/lib/components/vertical-connector-arrow/vertical-connector-arrow.component.tslibs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.tslibs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.tslibs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.tslibs/blog/shared/ui-card/src/lib/card.component.tslibs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.htmllibs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.html
📚 Learning: 2025-02-24T16:17:27.933Z
Learnt from: DDonochVA
Repo: HouseOfAngular/angular-love PR: 390
File: libs/blog/home/feature-home/src/lib/home-page/home-page.component.html:1-26
Timestamp: 2025-02-24T16:17:27.933Z
Learning: In the angular-love project, use modern Angular control flow (for, if) instead of structural directives (*ngFor, *ngIf) for template iteration and conditional rendering.
Applied to files:
libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts
🧬 Code graph analysis (8)
libs/shared/assets/src/lib/styles/global.css (2)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (4)
setThemeAttribute(48-58)CCAppThemeConsumer(47-59)store(15-36)AppThemeStore(7-9)apps/blog/src/app/app.component.ts (1)
AppComponent(14-43)
libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.html (1)
libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.ts (2)
DynamicTextClampComponent(26-35)toggleReadMore(32-34)
libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html (1)
libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.ts (3)
LayoutComponent(23-40)layoutConfig(26-39)LayoutConfig(8-10)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (2)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts (2)
AuthorCardComponent(42-92)clampText(51-51)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-data-model.ts (1)
UiAuthorCard(3-13)
libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts (2)
libs/blog/roadmap/ui-roadmap-node/src/lib/types/roadmap-node.ts (1)
AngularLoveNode(22-27)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.ts (2)
RoadmapDialogComponent(43-67)isAngularNode(20-22)
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html (1)
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts (1)
FooterComponent(38-102)
libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html (1)
libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.ts (1)
NewsletterExamplesComponent(7-7)
libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts (1)
libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents-scroll-spy.directive.ts (1)
TableOfContentsScrollSpyDirective(20-75)
🔇 Additional comments (55)
libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html (3)
17-17: Class reordering is semantically sound.The reordering of padding utilities (line 17) and margin utilities (line 21) does not change functionality and aligns with consistent ordering practices for Tailwind v4 migrations.
Also applies to: 21-21
40-40: Utility updates align with Tailwind v4 conventions.The changes from
roundedtorounded-smand addition ofleading-4are valid Tailwind v4 adjustments. The button styling is clean and maintainable.Also applies to: 49-49
30-31: Verify custom utilities are properly configured in the v4 Tailwind config.This component relies on custom utilities that must be defined in the updated Tailwind v4 configuration:
- Custom colors:
bg-al-pink,border-al-gray-200,bg-al-radial-gradient- Custom shadow with compound selector:
md:hover:shadow-al-primary- Arbitrary grid utilities:
grid-rows-[1fr],grid-rows-[0fr]Since this is part of a larger migration, ensure that the shared UI tokens and theme configuration in the v4 setup includes all these custom utilities and that arbitrary bracket syntax still resolves correctly.
Also applies to: 3-3, 21-21, 40-40, 49-49
libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts (1)
20-27: Tailwind v4 class rename in example is correctThe switch to
shrink-0 grow-0 basis-fullmatches Tailwind v4’sflex-shrink-*/flex-grow-*→shrink-*/grow-*renames and keeps the intended layout semantics for the slider items. No further changes needed.libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (2)
32-34: Correct Tailwind v4 migration for text wrapping.The change from
break-wordstowrap-break-wordcorrectly implements the Tailwind v4 text wrapping control syntax.
52-52: Correct Tailwind v4 migration for important modifier.The important modifier position change from
dark:!bg-al-radial-gradienttodark:bg-al-radial-gradient!correctly implements the Tailwind v4 breaking change where the!modifier must come after the utility name instead of before.libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html (2)
17-17: LGTM!The refactor from
rounded-[2rem]torounded-4xlcorrectly adopts Tailwind v4's standard theme utilities, improving maintainability and consistency.
2-2: CSS variable migration concern does not apply—no CSS variables found in module.Verification across the entire
libs/blog/newsletter/feature-newsletter/srcmodule found no CSS variable references in either v3 bracket syntax ([--var-name]) or v4 parentheses syntax ((--var-name)). The conditional concern in the original review comment ("If the codebase uses CSS variables...") is not applicable to this codebase. No action required.libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html (4)
16-23: Tailwind v4 syntax updated correctly.The
flex-grow→growchange aligns with Tailwind v4 conventions where flex utility variants were simplified.
26-33: Tailwind v4 syntax updated correctly.The
flex-grow→growchange aligns with Tailwind v4 conventions. Consistent refactor across form inputs.
55-59: Variant order updated for Tailwind v4.The change from
peer-checked:[&>...]to[&>...]:peer-checked:correctly reflects Tailwind v4's left-to-right variant reading convention.
79-81: ****
rounded-xsis a standard Tailwind v4 utility—not a custom or undefined class. The v3-to-v4 migration specifically updates<utility>-smutilities to their<utility>-xsequivalents. The change fromrounded-smtorounded-xsis correct and requires no additional configuration. No custom definition intailwind.config.jsis needed.Likely an incorrect or invalid review comment.
libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.html (2)
16-16: Important modifier placement correctly updated for Tailwind v4.The important modifier syntax has been correctly updated from the v3 prefix style (
!hidden) to the v4 suffix style (hidden!), aligning with Tailwind v4's breaking change where the!modifier now comes after the utility name.
18-18:line-clamp-noneis a valid Tailwind CSS v4 utility—no changes needed.The
line-clamp-noneclass removes clamping in Tailwind CSS v4, and the important modifier placement (line-clamp-none!) is correct. The code is as intended.libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-basic-node/roadmap-basic-node.component.ts (1)
19-23: Tailwind v4 class updates for label and button look goodThe move to
z-20andbg-whiteplus the existinglight:/text tokens keeps the layout and theming semantics intact; no Angular or Tailwind v4 issues stand out here.Also applies to: 27-36
libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts (1)
22-24: LGTM! Minor styling adjustment for consistency.The change from
roundedtorounded-smis appropriate for the Tailwind v4 upgrade and maintains visual consistency across the application.libs/blog/shared/ui-not-found/src/lib/not-found-page.component.ts (1)
22-22: Correct Tailwind v4 migration for text wrapping.The change from
break-wordstowrap-break-wordaligns with Tailwind v4's updated text wrapping utilities. This ensures the 404 title breaks properly on narrow viewports.libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts (2)
88-88: LGTM! Styling consistency update.The change from
roundedtorounded-smmaintains visual consistency with the Tailwind v4 upgrade across the application.
9-10: The module boundary bypass is intentional and appropriate for Storybook configuration.The eslint-disable is necessary because type:ui modules cannot import from type:data-access per your Nx module boundary constraints. However, Storybook stories require data-access providers (like TranslocoHttpLoader) to set up test configurations. This is a standard, documented exception pattern. TranslocoHttpLoader is legitimately used at line 31 to configure Transloco in the story providers, and no alternative path exists since it's only exported from the data-access layer.
No changes needed.
libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts (1)
22-22: Correct Tailwind v4 gradient syntax migration.The change from
bg-gradient-to-rtobg-linear-to-ris required for Tailwind v4 compatibility. The new syntax is part of v4's expanded gradient system that now includes linear, radial, and conic gradients.libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.html (1)
2-2: Correct Tailwind v4 gradient syntax migration.The change from
bg-gradient-to-brtobg-linear-to-brproperly updates the gradient utility for Tailwind v4 compatibility while maintaining the bottom-right gradient direction.libs/blog/shared/ui-tooltip/src/lib/ui-tooltip/ui-tooltip.component.ts (1)
8-8: Excellent refactoring to standard Tailwind utilities.The changes from arbitrary values (
max-w-[13rem],rounded-[0.25rem]) to standard utilities (max-w-52,rounded-sm) are mathematically equivalent and improve maintainability by using Tailwind's design system scales.apps/blog/src/assets/i18n/en.json (1)
279-279: Unrelated change in Tailwind upgrade PR.This translation content update appears unrelated to the Tailwind v4 upgrade. While the improved copy is beneficial, consider whether this should be in a separate PR for better change tracking and review clarity.
If this was an intentional improvement noticed during the upgrade work, that's fine—just confirming it wasn't accidentally included.
libs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.ts (1)
20-20: Required Tailwind v4 flex utility migration.The changes from
flex-shrink-0 flex-grow-0toshrink-0 grow-0are required for Tailwind v4 compatibility. This is a documented breaking change where the flex utility prefixes have been shortened for better ergonomics.Also applies to: 25-25
libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html (1)
4-4: LGTM! Correct Tailwind v4 important modifier syntax.The important modifier has been correctly migrated from the prefix position (
!relative) to the suffix position (relative!) as required by Tailwind v4.Based on library documentation.
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card-skeleton.component.ts (1)
10-10: Verify the selector scope change from direct children to all descendants.The class update includes two changes:
- ✓ Important modifier correctly migrated:
!p-0→p-0!⚠️ Selector changed:[&>*]:(direct children) →*:(all descendants)The selector change means padding suppression now applies to all nested elements inside
<al-card>, not just immediate children. Confirm this broader scope is intentional.Based on library documentation.
libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-subtitle/roadmap-dialog-subtitle.component.ts (1)
9-9: LGTM! Correct Tailwind v4 utility class migration.The utility class has been correctly migrated from
flex-growtogrowas required by Tailwind v4.Based on library documentation.
libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html (2)
4-4: LGTM! Typography scale updated.The font size has been updated from
text-xltotext-3xl, adjusting the visual hierarchy of the title.
8-8: LGTM! Cleaner height token usage.Using
h-pxinstead ofh-[1px]is more idiomatic and aligns with Tailwind's built-in utilities.package.json (1)
50-50: LGTM! Tailwind v4 dependencies correctly added and updated.The package versions align with the Tailwind v4 migration:
- Added
@tailwindcss/postcssv4.1.17 for the new PostCSS-based build- Updated
prettier-plugin-tailwindcssto v0.7.1 (compatible with v4)- Updated
tailwindcssto v4.1.17Also applies to: 137-137, 141-141
libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts (1)
30-31: LGTM! Using semantic color utilities.Replacing arbitrary hex values (
text-[#fff],text-[#000]) with named utilities (text-white,text-black) improves readability and aligns with the global theming system introduced in this PR.libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-cluster/roadmap-cluster.component.ts (2)
10-10: LGTM! Correct Tailwind v4 syntax migrations.The class string correctly updates:
- CSS variable syntax:
border-[--primary-foreground]→border-(--primary-foreground)(brackets to parentheses)- Gradient syntax: gradient utilities now use the linear/radial/conic prefixes
Based on library documentation.
28-28: LGTM! Correct Tailwind v4 gradient and CSS variable syntax.The host class correctly migrates:
bg-gradient-to-br→bg-linear-to-br(new gradient syntax)border-[--primary-foreground]→border-(--primary-foreground)(CSS variable syntax)Based on library documentation.
libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-node-label/roadmap-node-label.component.ts (2)
33-33: LGTM! Consistent kebab-case naming.The class name has been updated from camelCase (
comingSoon) to kebab-case (coming-soon), improving consistency with CSS naming conventions.
35-35: LGTM! Correct Tailwind v4 gradient syntax.The gradient utility has been correctly migrated from
bg-gradient-to-rtobg-linear-to-ras required by Tailwind v4.Based on library documentation.
libs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.ts (2)
55-55: Correct use of Tailwind v4 important modifier on margin-top
mt-4!correctly moves the important modifier to the end of the utility, matching Tailwind v4’s required syntax while preserving the previous layout behavior for the table-of-contents skeleton. This also keeps skeleton styling inline with the rest of the component, which aligns with your existing preference for inline Tailwind utilities.
76-79: Skeleton share section updates look consistent and non-breakingThe second skeleton card’s
mt-4!update is consistent with Tailwind v4 important syntax, and the cleanup of the inner container class (ml-10 flex h-10 w-[100px]) only affects formatting, not behavior. No issues from a layout or Tailwind-compatibility standpoint.libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (1)
4-4: Confirmaspect-2/1and custom outline utilities are defined in Tailwind configThe updated anchor uses:
light:outline-solid light:outline-1 light:outline-al-borderaspect-2/1These look like custom utilities / theme keys. They’re fine as long as:
outline-solid,outline-1, andoutline-al-borderare declared in your Tailwind v4 theme or via@utility.- An
aspectRatiokey of'2/1'is configured (e.g.,aspectRatio: { '2/1': '2 / 1' }), soaspect-2/1actually generates CSS.Without those, Tailwind won’t emit the expected styles and the partner tiles may collapse or lose outlines.
libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts (1)
19-22: Off-canvas mobile menu translation remains correct with-top-full/translate-y-fullSwitching from
-top-[100%]/translate-y-[100%]to-top-full/translate-y-fullpreserves the slide-in-from-top behavior while using standard Tailwind utilities, which is cleaner and more idiomatic in v4.Closed:
-top-fullkeeps the menu fully above the viewport.
Opened:translate-y-fullbrings it exactly into view, in combination withtransition-transform duration-300.Looks good; just ensure this still feels smooth on real mobile devices and under
prefers-reduced-motion.libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html (3)
11-11: Tokenizedmax-w-(--breakpoint-xl)aligns with Tailwind v4 CSS var syntaxSwitching from
max-w-screen-xltomax-w-(--breakpoint-xl)follows the new parentheses-based CSS variable convention in Tailwind v4 and centralizes your breakpoint width as a design token.Just ensure
--breakpoint-xlis defined in your global CSS/theme (e.g., on:rootor a light/dark theme wrapper) so this dialog width is actually applied.
16-16: Header row border/radius tightening is safe and consistentChanging the search header row to use
rounded-smkeeps the visual hierarchy subtle and matches the general move toward smaller radii in the rest of the PR. No behavioral impact; purely visual and consistent with the updated design language.
20-20:outline-hiddenis the right Tailwind v4 replacement for fully removing the outlineReplacing
outline-nonewithoutline-hiddenmatches Tailwind v4’s new outline semantics (whereoutline-noneno longer fully removes the outline).Functionally this keeps the prior behavior of hiding the focus outline on the search input. From an accessibility perspective, it’s worth double-checking that you still have a clear visible focus style (e.g., via parent border, shadow, or background change) for keyboard users.
libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts (1)
27-27: LGTM! Correct Tailwind v4 important modifier syntax.The important modifier has been correctly moved to the end of the utility class (
block!instead of!block), which aligns with Tailwind v4's breaking change requiring the!modifier after the utility name.Also applies to: 47-47
libs/blog/roadmap/ui-roadmap/src/lib/components/vertical-connector-arrow/vertical-connector-arrow.component.ts (2)
8-8: LGTM! Correct Tailwind v4 migrations.The changes correctly update:
flex-grow→grow(per Tailwind v4 naming)border-l-[var(--primary)]→border-l-(--primary)(CSS variables now use parentheses)
12-12: Border width utilities are valid in Tailwind v4.Tailwind v4 supports plain numeric border-width utilities (e.g., border-t-30, border-r-16) that map directly to pixel values without brackets. The code changes are correct and follow Tailwind v4 conventions.
libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.html (2)
9-9: LGTM! Correct Tailwind v4 migrations.The class updates properly migrate to Tailwind v4 syntax:
w-[1px]→w-px(using standard utility)- Important modifiers moved to the end:
first:before:top-1/2!,first:before:h-1/2!,last:before:h-1/2!
14-14: LGTM! Outline and class binding updates.The changes include:
- Explicit
outline-solidfor clarity (Tailwind v4 requires explicit outline styles)- Removed double-space formatting in line 17
- Correct important modifier position in line 19:
[class.bg-al-primary!]Also applies to: 17-19
apps/blog/project.json (1)
33-33: LGTM! Global CSS file added for centralized theming.The addition of the global CSS file aligns with the PR's objective to introduce a comprehensive theming system with CSS variables and light/dark theme support.
apps/blog/.postcssrc.json (1)
1-5: LGTM! Correct Tailwind v4 PostCSS configuration.The new PostCSS configuration properly enables the
@tailwindcss/postcssplugin, which is the recommended approach for Tailwind v4 integration.libs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.html (1)
11-11: LGTM! Correct Tailwind v4 important modifier syntax.The important modifiers have been correctly moved to the end of the utility classes (
p-2!instead of!p-2) across all three buttons, which aligns with Tailwind v4's breaking change.Also applies to: 31-31, 47-47
libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts (1)
32-32: LGTM! Correct CSS variable syntax for Tailwind v4.The change from
max-w-screen-xltomax-w-(--breakpoint-xl)correctly uses the new parentheses syntax for CSS variables in Tailwind v4, enabling dynamic breakpoint values from the theme system.libs/blog/shared/ui-button/src/lib/button/button.component.ts (1)
24-29: Tailwind v4 important modifier migration forlinkvariant looks correctUsing
underline!instead of!underlinematches Tailwind v4’s post-utility important syntax and will correctly override the baseno-underlineclass for link buttons.libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html (1)
4-7: CSS variable-based max-width looks right; ensure--breakpoint-xlis definedSwitching to
max-w-(--breakpoint-xl)uses the correct Tailwind v4 CSS-variable syntax and keeps the roadmap conditional logic intact. Please just confirm that--breakpoint-xlis defined in your global theme so non‑roadmap layouts don’t accidentally fall back to the default max-width.libs/blog/shared/ui-card/src/lib/card.component.ts (1)
45-48: Card hover, dark variant, and shadow updates line up with Tailwind v4 utilities
outline-solid+outline-1+ color utilities give a clear hover outline and use the new v4 outline-style API.- Dark card host classes correctly use suffix
!to override base padding and background (p-4!,bg-al-background!) while still composing with the baseal-cardstyles.- The shift to
shadow-xson the main card matches the skeleton and is a safe visual refinement.No functional issues spotted here.
Also applies to: 84-87, 102-104
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html (1)
6-35: Footer grid re-layout looks consistent; verify responsive ordering and breakpoint tokenThe new grid container (
max-w-(--breakpoint-xl),xl:grid-cols-[auto_1fr_auto]) and the explicitorder-*/col-spanutilities on the three sections create a clear, breakpoint-aware footer layout while preserving DOM order. Please sanity-check the layout at mobile,sm, andxlbreakpoints and confirm--breakpoint-xlis defined in your theme so the shared max-width behaves as intended across layout and footer.
| @reference '../../../../../../shared/assets/src/lib/styles/global.css'; | ||
|
|
There was a problem hiding this comment.
Invalid SCSS directive: @reference is not recognized.
The @reference directive is not a standard SCSS/Sass directive. The standard directives for importing stylesheets are:
@import(legacy)@use(modern, recommended)@forward(for re-exporting)
This will likely cause a compilation error.
Apply this diff to fix the directive:
-@reference '../../../../../../shared/assets/src/lib/styles/global.css';
+@use '../../../../../../shared/assets/src/lib/styles/global.css';Or if you need the legacy import behavior:
-@reference '../../../../../../shared/assets/src/lib/styles/global.css';
+@import '../../../../../../shared/assets/src/lib/styles/global.css';📝 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.
| @reference '../../../../../../shared/assets/src/lib/styles/global.css'; | |
| @use '../../../../../../shared/assets/src/lib/styles/global.css'; |
🤖 Prompt for AI Agents
In
libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss
lines 1-2, the nonstandard `@reference` directive is causing compilation errors;
replace it with a standard Sass/CSS import (prefer `@use
'../../../../../../shared/assets/src/lib/styles/global'` for modern SCSS modules
or `@import '../../../../../../shared/assets/src/lib/styles/global.css'` if you
need legacy CSS import behavior), ensuring the path and file extension match the
target file.
| @@ -1,5 +1,5 @@ | |||
| <div | |||
| class="relative mt-2 h-[600px] w-[300px] rounded-[2.5rem] border-[14px] border-gray-800 bg-gray-800 dark:border-gray-800" | |||
| class="relative mt-2 h-[600px] w-[300px] rounded-[2.5rem] border-14 border-gray-800 bg-gray-800 dark:border-gray-800" | |||
There was a problem hiding this comment.
🧩 Analysis chain
Verify that border-14 produces the intended 14px border width.
The change from border-[14px] to border-14 relies on a theme-scale definition. Ensure the Tailwind v4 configuration defines border-14 to produce a 14px border (not a different value from the theme's default scale).
🏁 Script executed:
#!/bin/bash
# Description: Search for border-width scale definitions in Tailwind config
# Expected: Confirm border-14 maps to 14px, or identify if theme has custom spacing
fd -e 'config.ts' -e 'config.js' -e 'tailwind.config.ts' -e 'tailwind.config.js' |
xargs rg -A 10 -B 2 "border|spacing|theme" 2>/dev/null | head -100Length of output: 1811
Revert border-14 to border-[14px] or add border-14 to the theme configuration.
The Tailwind v4 configuration at apps/blog/tailwind.config.js does not define a custom border-14 utility. The default Tailwind v4 scale includes only 0, 1, 2, 4, and 8. The change from border-[14px] (an arbitrary value that works in v4) to border-14 (undefined) will remove the border styling at runtime. Either revert the class name or extend the theme with the custom border width.
🤖 Prompt for AI Agents
In
libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html
around line 2, the class uses border-14 which isn't defined in the Tailwind v4
config so the border will disappear at runtime; revert the classname to the
working arbitrary value border-[14px] or add a borderWidth: { '14': '14px' }
entry to apps/blog/tailwind.config.js under theme.extend to expose border-14,
then rebuild to ensure the utility is recognized.
...blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html
Outdated
Show resolved
Hide resolved
|
PR is detected, will deploy to dev environment |
|
Deployed to dev environment |
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss (1)
1-2: Invalid SCSS directive:@referenceis not recognized.The
@referencedirective is not a standard SCSS/Sass directive and will cause compilation errors. The valid directives for importing stylesheets are:
@use(modern, recommended)@import(legacy)@forward(for re-exporting)Apply this diff to fix the directive:
-@reference '../../../../../../shared/assets/src/lib/styles/global.css'; - +@use '../../../../../../shared/assets/src/lib/styles/global';Or if you need to import CSS directly:
-@reference '../../../../../../shared/assets/src/lib/styles/global.css'; - +@import '../../../../../../shared/assets/src/lib/styles/global.css';Based on past review comments.
🧹 Nitpick comments (1)
libs/shared/assets/src/lib/styles/global.css (1)
130-139: Consider consolidating duplicate border color rules.Lines 131-133 duplicate the border color setting from lines 121-128. While both
@layer baseblocks are valid, the duplicate rule is redundant.Consider consolidating into a single
@layer baseblock:@layer base { - :root { + * { + border-color: rgb(var(--border)); + } + + :root { --primary: 213 1 89; --foreground: 20 21 27; ... color-scheme: light; } :root[data-theme='dark'] { ... } - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentColor); - } -} - -@layer base { - * { - border-color: rgb(var(--border)); - } - body { background-color: rgb(var(--background)); color: rgb(var(--foreground)); } }This eliminates the redundancy and uses the correct token throughout.
📜 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)
apps/blog/.postcssrc.json(1 hunks)apps/blog/project.json(1 hunks)apps/blog/src/assets/i18n/en.json(1 hunks)apps/blog/tailwind.config.js(1 hunks)libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html(1 hunks)libs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.ts(1 hunks)libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts(2 hunks)libs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.ts(2 hunks)libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card-skeleton.component.ts(1 hunks)libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss(1 hunks)libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html(1 hunks)libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.html(1 hunks)libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts(2 hunks)libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts(2 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html(3 hunks)libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss(0 hunks)libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts(1 hunks)libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html(1 hunks)libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts(2 hunks)libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html(5 hunks)libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html(2 hunks)libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-subtitle/roadmap-dialog-subtitle.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.html(1 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-basic-node/roadmap-basic-node.component.ts(2 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-cluster/roadmap-cluster.component.ts(2 hunks)libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-node-label/roadmap-node-label.component.ts(1 hunks)libs/blog/roadmap/ui-roadmap/src/lib/components/vertical-connector-arrow/vertical-connector-arrow.component.ts(1 hunks)libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html(1 hunks)libs/blog/shared/ui-button/src/lib/button/button.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card-skeleton.component.ts(1 hunks)libs/blog/shared/ui-card/src/lib/card.component.ts(3 hunks)libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.html(1 hunks)libs/blog/shared/ui-not-found/src/lib/not-found-page.component.ts(1 hunks)libs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.html(3 hunks)libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts(1 hunks)libs/blog/shared/ui-tooltip/src/lib/ui-tooltip/ui-tooltip.component.ts(1 hunks)libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html(3 hunks)libs/shared/assets/src/lib/styles/global.css(1 hunks)libs/shared/assets/src/lib/styles/main.scss(0 hunks)package.json(2 hunks)tailwind.preset.js(1 hunks)
💤 Files with no reviewable changes (2)
- libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss
- libs/shared/assets/src/lib/styles/main.scss
🚧 Files skipped from review as they are similar to previous changes (30)
- libs/blog/shared/ui-social-media-icons/src/lib/social-media-icons.component.ts
- libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-node-label/roadmap-node-label.component.ts
- package.json
- libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html
- libs/blog/newsletter/feature-newsletter/src/lib/page/newsletter-examples/newsletter-examples.component.html
- libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts
- libs/blog/shared/ui-dynamic-text-clamp/src/lib/dynamic-text-clamp/dynamic-text-clamp.component.html
- libs/blog/shared/ui-pagination/src/lib/pagination/pagination.component.html
- apps/blog/src/assets/i18n/en.json
- libs/blog/shared/ui-not-found/src/lib/not-found-page.component.ts
- libs/blog/roadmap/ui-roadmap/src/lib/components/vertical-connector-arrow/vertical-connector-arrow.component.ts
- libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-basic-node/roadmap-basic-node.component.ts
- libs/blog/shared/ui-card/src/lib/card-skeleton.component.ts
- libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts
- libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html
- libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html
- libs/blog/roadmap/ui-roadmap-node/src/lib/components/roadmap-cluster/roadmap-cluster.component.ts
- libs/blog/shared/ui-card/src/lib/card.component.ts
- libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-header/roadmap-dialog-header.component.ts
- libs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.ts
- libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog.component.html
- libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts
- libs/blog/shared/ui-button/src/lib/button/button.component.ts
- libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card-skeleton.component.ts
- libs/blog/search/feature-search/src/lib/feature-search/search-dialog/search-dialog.component.html
- libs/blog/shared/ui-tooltip/src/lib/ui-tooltip/ui-tooltip.component.ts
- libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
- tailwind.preset.js
- libs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.ts
- libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.html
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-02-24T15:58:21.460Z
Learnt from: DDonochVA
Repo: HouseOfAngular/angular-love PR: 390
File: libs/blog/home/feature-home/src/lib/home-page/home-page.component.html:1-26
Timestamp: 2025-02-24T15:58:21.460Z
Learning: In the angular-love project, prefer using inline Tailwind classes over extracting them into separate CSS files, as it provides better visibility and maintains consistency with the codebase.
Applied to files:
libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.tsapps/blog/tailwind.config.js
🧬 Code graph analysis (3)
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html (1)
libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts (1)
FooterComponent(38-102)
libs/shared/assets/src/lib/styles/global.css (2)
libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts (4)
setThemeAttribute(48-58)CCAppThemeConsumer(47-59)store(15-36)AppThemeStore(7-9)apps/blog/src/app/app.component.ts (1)
AppComponent(14-43)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (1)
libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts (2)
AuthorCardComponent(42-92)clampText(51-51)
🔇 Additional comments (23)
libs/blog/writing-rules/feature-writing-rules/src/lib/rules-row/rules-row.component.html (2)
17-17: Class reordering looks good.These are purely cosmetic reorderings (padding and margin utilities) that don't affect functionality or Tailwind v4 compliance.
Also applies to: 21-21
40-40: Button styling updates align with Tailwind v4 patterns.The changes correctly use
rounded-sm(replacing the older rounded styles) and addleading-4for better typography control. Class reordering is appropriate.Verify that the custom color tokens (
bg-al-pink,border-al-gray-200) are properly defined in the new Tailwind v4 configuration. Since custom tokens are referenced here but the config files are outside this review, please confirm these tokens are available in the updatedtailwind.config.tsor global CSS theming file.Also applies to: 49-49
libs/blog/roadmap/ui-roadmap-dialog/src/lib/roadmap-dialog-subtitle/roadmap-dialog-subtitle.component.ts (1)
9-9: Correct Tailwind v4 migration!The class change from
flex-growtogrowcorrectly follows the Tailwind v4 breaking changes. The functionality remains identical—the divider will still grow to fill available space.libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts (2)
9-9: LGTM: Lint bypass is appropriate for Storybook.The eslint-disable comment is acceptable here as Storybook files often need to import across module boundaries for demonstration purposes.
88-88: LGTM: Border radius update aligns with styling refinements.The change from
roundedtorounded-smis a valid Tailwind utility and appears to be part of the broader styling consistency improvements.libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts (2)
27-27: Correct Tailwind v4 migration: Important modifier moved to end.The change from
!blocktoblock!correctly implements Tailwind v4's breaking change where the important modifier must now appear at the end of the utility class.
47-47: Correct Tailwind v4 migration: Important modifier moved to end.The change from
!blocktoblock!correctly implements Tailwind v4's breaking change where the important modifier must now appear at the end of the utility class.libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts (2)
52-52: Correct Tailwind v4 migration: Important modifier moved to end.The change from
dark:!bg-al-radial-gradienttodark:bg-al-radial-gradient!correctly implements Tailwind v4's breaking change where the important modifier must now appear at the end of the utility class.
32-34: No issues found. Thewrap-break-wordutility is correct for Tailwind v4.The change from
break-wordstowrap-break-wordaligns with Tailwind v4's explicit overflow-wrap utilities. The code migration is appropriate and no changes are needed.libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html (2)
6-6: Correct Tailwind v4 migration: CSS variable syntax updated.The use of
max-w-(--breakpoint-xl)correctly implements Tailwind v4's breaking change where CSS variables now use parentheses instead of brackets (OLD:max-w-[--breakpoint-xl]).
8-18: LGTM: Responsive layout restructuring looks good.The footer layout has been restructured with explicit ordering (
order-1,order-2,order-3) and responsive alignment utilities. This provides better control over the layout across different breakpoints.apps/blog/.postcssrc.json (1)
1-5: LGTM: PostCSS configuration for Tailwind v4.The PostCSS configuration correctly sets up the
@tailwindcss/postcssplugin, which is the standard approach for integrating Tailwind CSS v4 with the build pipeline.libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html (2)
4-4: LGTM: Font size increased for better visual hierarchy.The change from
text-xltotext-3xlincreases the heading size, improving visual hierarchy. This is a valid Tailwind utility and appears to be an intentional design update.
8-8: LGTM: Semantic utility for 1px height.The change from
h-[1px]toh-pxuses the semantic Tailwind utility for 1-pixel height, which is more concise and idiomatic than the arbitrary value syntax.libs/blog/partners/ui-partners/src/lib/partners-list/partners-list.component.html (1)
4-4: The change fromaspect-[2/1]toaspect-2/1is valid. Tailwind CSS v4 supports the slash shorthand (e.g., aspect-2/1) for aspect ratios, making both syntaxes acceptable. The refactored code is correct as written.Likely an incorrect or invalid review comment.
apps/blog/project.json (1)
33-33: LGTM!The addition of the global CSS file correctly integrates the new Tailwind v4 theming system into the blog build. The file order ensures proper CSS cascade.
apps/blog/tailwind.config.js (2)
4-7: LGTM!The explicit content patterns correctly cover both the app source and shared libraries, ensuring Tailwind v4 processes all relevant files for class detection.
3-12: PostCSS configuration is correctly set up for Tailwind v4.Verification confirms that
apps/blog/.postcssrc.jsoncontains the proper@tailwindcss/postcssplugin configuration, and the project uses Tailwind CSS v4.1.17. The minimal tailwind.config.js with the CSS-first approach is properly supported by the PostCSS setup.libs/shared/assets/src/lib/styles/global.css (5)
1-1: LGTM!Correct Tailwind v4 import syntax, replacing the previous
@tailwind base/components/utilitiesdirectives.
3-70: LGTM!The
@themedirective correctly defines custom design tokens following Tailwind v4 conventions. The token structure supports both light and dark themes through CSS custom properties.
72-72: LGTM!The custom dark variant correctly implements attribute-based theme switching, aligning with the theme store implementation that sets the
data-themeattribute.
74-98: LGTM!The root theme tokens are well-structured with consistent RGB triplet definitions for both light and dark modes, following a clear theming pattern.
121-128: Fix undefined color token reference.Line 126 references
--color-gray-200which is not defined in the@themeblock above. This appears to be leftover from a previous implementation.Apply this diff to use the defined border color token:
*, ::after, ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentColor); + border-color: rgb(var(--border)); }This aligns with your defined theme tokens and will properly respect light/dark mode border colors.
Likely an incorrect or invalid review comment.
| @utility al-scroll { | ||
| &::-webkit-scrollbar { | ||
| width: 0.625rem; | ||
| } | ||
| &::-webkit-scrollbar-track { | ||
| background-color: transparent; | ||
| } | ||
| &::-webkit-scrollbar-thumb { | ||
| border-radius: 0.5rem; | ||
| background-color: var(--color-gray-400); | ||
| } | ||
| } |
There was a problem hiding this comment.
Fix undefined color token reference.
Line 150 references --color-gray-400 which is not defined in the @theme block. This will fall back to browser defaults.
Consider defining the token in your @theme block or using an existing token:
@utility al-scroll {
&::-webkit-scrollbar {
width: 0.625rem;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
- background-color: var(--color-gray-400);
+ background-color: rgb(var(--muted));
}
}Alternatively, add --color-al-gray-400 to your @theme block if you need a specific gray shade for scrollbars.
📝 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.
| @utility al-scroll { | |
| &::-webkit-scrollbar { | |
| width: 0.625rem; | |
| } | |
| &::-webkit-scrollbar-track { | |
| background-color: transparent; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| border-radius: 0.5rem; | |
| background-color: var(--color-gray-400); | |
| } | |
| } | |
| @utility al-scroll { | |
| &::-webkit-scrollbar { | |
| width: 0.625rem; | |
| } | |
| &::-webkit-scrollbar-track { | |
| background-color: transparent; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| border-radius: 0.5rem; | |
| background-color: rgb(var(--muted)); | |
| } | |
| } |
🤖 Prompt for AI Agents
In libs/shared/assets/src/lib/styles/global.css around lines 141 to 152 the
scrollbar thumb uses an undefined CSS variable --color-gray-400; update the
theme or CSS to use a defined token: either add --color-gray-400 to the @theme
block with the intended color value, or replace the usage with an existing token
(for example --color-al-gray-400 or another defined gray variable) so the
scrollbar thumb resolves to a defined color.
| @utility al-link { | ||
| @apply text-red-500 hover:underline dark:text-blue-400; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
Verify dark variant works with custom theme switching.
The dark: variant on line 155 relies on Tailwind's default dark mode implementation, but you've defined a custom variant using @custom-variant dark with data-theme attribute selector.
Verify that the dark: prefix correctly applies with your custom data-theme attribute approach:
If the dark variant doesn't work as expected, you may need to configure Tailwind's darkMode setting in tailwind.config.js:
module.exports = {
darkMode: ['selector', '[data-theme="dark"]'],
// ... rest of config
};🏁 Script executed:
#!/bin/bash
# Search for usage of al-link utility to see if dark mode works correctly
echo "=== Searching for al-link usage ==="
rg -n "al-link" --type html --type ts -C 2
echo -e "\n=== Checking dark variant implementation ==="
# Verify if there are other dark: usages in the codebase
rg -n "dark:" --type html --type ts -g "!node_modules" | head -20Length of output: 3281
---
🏁 Script executed:
```shell
#!/bin/bash
# Find and check tailwind config
echo "=== Finding tailwind config ==="
fd -n "tailwind.config" . --type f
echo -e "\n=== Checking global.css for custom dark variant ==="
cat libs/shared/assets/src/lib/styles/global.css | head -30
echo -e "\n=== Searching for @custom-variant dark definition ==="
rg -n "@custom-variant" --type css
Length of output: 1640
---
🏁 Script executed:
```shell
#!/bin/bash
# Find tailwind config files with proper syntax
echo "=== Finding tailwind config files ==="
fd "tailwind.config" --type f
echo -e "\n=== Check if tailwind.config exists and inspect darkMode ==="
if [ -f "tailwind.config.ts" ]; then
echo "=== Content of tailwind.config.ts ==="
cat tailwind.config.ts
elif [ -f "tailwind.config.js" ]; then
echo "=== Content of tailwind.config.js ==="
cat tailwind.config.js
else
echo "No tailwind.config file found at root"
fi
echo -e "\n=== Checking global.css for complete custom variant context ==="
sed -n '70,75p' libs/shared/assets/src/lib/styles/global.css
Length of output: 372
---
🏁 Script executed:
```shell
#!/bin/bash
echo "=== Content of apps/blog/tailwind.config.js ==="
cat apps/blog/tailwind.config.js
echo -e "\n=== Content of libs/shared/storybook/tailwind.config.js ==="
cat libs/shared/storybook/tailwind.config.js
echo -e "\n=== Checking if al-link custom utility works with dark variant ==="
sed -n '154,156p' libs/shared/assets/src/lib/styles/global.css
Length of output: 827
---
🏁 Script executed:
```shell
#!/bin/bash
echo "=== Finding tailwind.preset.js ==="
fd "tailwind.preset" --type f
echo -e "\n=== Content of tailwind preset ==="
cat tailwind.preset.js 2>/dev/null || echo "File not found at root, searching..."
echo -e "\n=== Searching for all preset files ==="
find . -name "*tailwind*preset*" -type f 2>/dev/null | head -10
Length of output: 215
Add darkMode configuration to tailwind.config.js to enable the custom dark: variant with data-theme attribute.
Your custom dark variant is defined in global.css line 72 using the data-theme attribute, but without a matching darkMode configuration in Tailwind, the dark: prefix will use Tailwind's default media-query-based dark mode instead. Add the following to apps/blog/tailwind.config.js:
module.exports = {
darkMode: ['selector', '[data-theme="dark"]'],
content: [
join(__dirname, 'src/**/*.{ts,html}'),
join(__dirname, '../../libs/**/*.{ts,html}'),
],
theme: {
extend: {},
},
plugins: [],
};Without this, dark:text-blue-400 in the al-link utility will not apply when the data-theme="dark" attribute is present on the DOM.
🤖 Prompt for AI Agents
In libs/shared/assets/src/lib/styles/global.css around lines 154-156 you use a
dark: utility (dark:text-blue-400) tied to data-theme but Tailwind isn't
configured to use the data-theme selector; open apps/blog/tailwind.config.js and
add a darkMode entry using the selector pattern (e.g. darkMode: ['selector',
'[data-theme="dark"]']), ensure the content array includes your app src and the
libs glob so Tailwind picks up classes, then rebuild so the custom dark: variant
applies when data-theme="dark".
Summary by CodeRabbit
New Features
Improvements
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.