chore: upgrade tailwind to v4

apps/blog/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

apps/blog/project.json

@@ -30,6 +30,7 @@
         ],
         "styles": [
           "apps/blog/src/styles.scss",
+          "libs/shared/assets/src/lib/styles/global.css",
           "libs/shared/assets/src/lib/styles/main.scss",
           "node_modules/vanilla-cookieconsent/dist/cookieconsent.css",
           "libs/shared/assets/src/lib/styles/cookies-consent.scss"

apps/blog/src/assets/i18n/en.json

@@ -276,7 +276,7 @@
     },
     "synopsisRules": {
       "title": "Synopsis",
-      "section1": "Sketch a plan for your article—propose a catchy title, outline paragraphs, and identify the target audience.",
+      "section1": "Sketch a plan for your article—propose a catchy title, outline-solid paragraphs, and identify the target audience.",
       "section2": "Share your synopsis in the angular.love bloggers group for feedback.",
       "section3": "After incorporating feedback, move on to writing."
     },

apps/blog/tailwind.config.js

@@ -1,12 +1,12 @@
-// apps/angular-app/tailwind.config.js
-const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
 const { join } = require('path');
 
-/** @type {import('tailwindcss').Config} */
 module.exports = {
-  presets: [require('../../tailwind.preset.js')],
   content: [
-    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
-    ...createGlobPatternsForDependencies(__dirname),
+    join(__dirname, 'src/**/*.{ts,html}'),
+    join(__dirname, '../../libs/**/*.{ts,html}'),
   ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 };

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html

@@ -1,7 +1,7 @@
 <aside>
   <img
     tabindex="0"
-    class="!relative cursor-pointer"
+    class="relative! cursor-pointer"
     [attr.aria-label]="banner().alt"
     [alt]="banner().alt"
     [ngSrc]="banner().url"

libs/blog/ad-banner/ui/src/lib/banner-carousel/al-banner-carousel.component.ts

@@ -17,12 +17,12 @@ import { AlInfiniteSliderDirective } from '../infinite-slider-directive/al-infin
               let banner of banners();
               msPerSlide: msPerSlide()
             "
-            class="flex-shrink-0 flex-grow-0 basis-full"
+            class="shrink-0 grow-0 basis-full"
             [banner]="banner"
           />
         } @else if (banners().length === 1) {
           <al-ad-image-banner
-            class="flex-shrink-0 flex-grow-0 basis-full"
+            class="shrink-0 grow-0 basis-full"
             [banner]="banners()[0]"
           />
         }

libs/blog/ad-banner/ui/src/lib/infinite-slider-directive/al-infinite-slider.directive.ts

@@ -21,7 +21,7 @@ import { debounceTime, interval, tap } from 'rxjs';
  *   <div class="flex">
  *     <some-banner-component
  *        *alInfiniteSlider="let banner of banners()"
- *        class="flex-shrink-0 flex-grow-0 basis-full"
+ *        class="shrink-0 grow-0 basis-full"
  *        [banner]="banner"
  *     />
  *   </div>
@@ -34,7 +34,7 @@ import { debounceTime, interval, tap } from 'rxjs';
 })
 export class AlInfiniteSliderDirective {
   readonly slidesElements = input.required<unknown[]>({
-    alias: 'alInfiniteSliderOf',
+    alias: 'alInfiniteSliderOf', // eslint-disable-line
   });
   readonly msPerSlide = input<number>(7000, {
     alias: 'alInfiniteSliderMsPerSlide',

libs/blog/articles/feature-article/src/lib/article-details/article-details-skeleton.component.ts

@@ -52,7 +52,7 @@ import { AuthorCardSkeletonComponent } from '@angular-love/blog/authors/ui-autho
         <al-author-card-skeleton />
         <!-- table-of-contents -->
         <div
-          class="!mt-4 hidden h-[344px] flex-col items-start justify-between rounded-lg border lg:flex"
+          class="mt-4! hidden h-[344px] flex-col items-start justify-between rounded-lg border lg:flex"
         >
           <ngx-skeleton-loader
             class="w-1/4"
@@ -73,9 +73,9 @@ import { AuthorCardSkeletonComponent } from '@angular-love/blog/authors/ui-autho
         </div>
         <!-- share article section -->
         <div
-          class="!mt-4 hidden h-[138px] flex-row items-center justify-between rounded-lg border lg:flex"
+          class="mt-4! hidden h-[138px] flex-row items-center justify-between rounded-lg border lg:flex"
         >
-          <div class="ml-10 flex h-10 w-[100px] ">
+          <div class="ml-10 flex h-10 w-[100px]">
             <ngx-skeleton-loader
               class="w-full"
               [theme]="{

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card-skeleton.component.ts

@@ -7,7 +7,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
   selector: 'al-article-regular-card-skeleton',
   imports: [NgxSkeletonLoaderModule, CardComponent],
   template: `
-    <al-card class="[&>*]:!p-0">
+    <al-card class="*:p-0!">
       <div alCardContent class="grid grid-rows-[220px_240px]">
         <div></div>
         <div class="p-4">

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss

@@ -1,3 +1,5 @@
+@reference '../../../../../../shared/assets/src/lib/styles/global.css';
+
 @mixin heading-styles {
   padding-bottom: 0.3rem;
   margin-bottom: 1.1rem;

libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html

@@ -1,11 +1,11 @@
 <div class="my-5 flex flex-row items-center justify-between gap-6">
   <h2
     data-testId="article-list-title"
-    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
+    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-3xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
   >
     {{ title() }}
   </h2>
-  <span class="bg-al-border hidden h-[1px] grow md:block"></span>
+  <span class="bg-al-border hidden h-px grow md:block"></span>
   @if (link(); as link) {
     <a class="text-base underline" [routerLink]="link.href | alLocalize">
       {{ link.displayName }}

libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.component.html

@@ -6,25 +6,25 @@
     <ul class="text- relative z-10 flex flex-col">
       @for (anchor of anchors(); track anchor.title) {
         <li
-          class="before:bg-al-muted relative py-2 before:absolute before:left-[5px] before:top-0 before:-z-10 before:h-full before:w-[1px] before:content-[''] before:first:!top-1/2 before:first:!h-1/2 before:last:!h-1/2"
+          class="before:bg-al-muted relative py-2 before:absolute before:top-0 before:left-[5px] before:-z-10 before:h-full before:w-px before:content-[''] first:before:top-1/2! first:before:h-1/2! last:before:h-1/2!"
         >
           <div class="flex items-center gap-4">
             <div class="flex w-[11px] shrink-0 items-center justify-center">
               <div
-                class="bg-al-muted outline-al-background rounded-full outline"
+                class="bg-al-muted outline-al-background rounded-full outline-solid"
                 [ngClass]="{
                   'size-[11px]': anchor.type === 'h2',
-                  'bg-al-border  size-[7px]': anchor.type === 'h3'
+                  'bg-al-border size-[7px]': anchor.type === 'h3',
                 }"
-                [class.!bg-al-primary]="activeAnchorTitle() === anchor.title"
+                [class.bg-al-primary!]="activeAnchorTitle() === anchor.title"
               ></div>
             </div>
 
             <a
               [ngClass]="{
                 'text-al-primary font-bold':
                   activeAnchorTitle() === anchor.title,
-                'ml-2 font-medium': anchor.type === 'h3'
+                'ml-2 font-medium': anchor.type === 'h3',
               }"
               [fragment]="anchor.title"
               [routerLink]="[]"

libs/blog/articles/ui-table-of-contents/src/lib/table-of-contents/table-of-contents.stories.ts

@@ -6,6 +6,7 @@ import {
   StoryObj,
 } from '@storybook/angular';
 
+// eslint-disable-next-line @nx/enforce-module-boundaries
 import { TranslocoHttpLoader } from '@angular-love/blog/i18n/data-access';
 
 import { TableOfContentsScrollSpyDirective } from './table-of-contents-scroll-spy.directive';
@@ -84,7 +85,7 @@ export const withScrollSpy: Story = {
   },
   render: (args) => ({
     template: `
-      <div #scrollContainer class="flex min-h-[400px] h-[70vh] gap-10 overflow-y-scroll p-10 border border-al-muted rounded">
+      <div #scrollContainer class="flex min-h-[400px] h-[70vh] gap-10 overflow-y-scroll p-10 border border-al-muted rounded-sm">
         <div class="flex flex-col gap-[250px]  p-10">
           <h1 id="Signals in Angular 16">Signals in Angular 16</h1>
           <h1 id="Server-side rendering">Server-side rendering</h1>

libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts

@@ -29,7 +29,9 @@ import {
               <ng-content select="[author-info-card]"></ng-content>
             </div>
           </div>
-          <div class="w-full flex-1 hyphens-auto break-words p-6 pt-0 md:pt-6">
+          <div
+            class="w-full flex-1 p-6 pt-0 wrap-break-word hyphens-auto md:pt-6"
+          >
             <ng-content select="[author-info-description]"></ng-content>
           </div>
         </div>
@@ -47,7 +49,7 @@ export class AuthorCardTemplateComponent {
 
   protected readonly authorInfoCardClass = computed(() =>
     !this.articleCard()
-      ? 'md:border dark:!bg-al-radial-gradient dark:bg-al-background md:light:bg-[#f2f2f2] pb-6'
+      ? 'md:border dark:bg-al-radial-gradient! dark:bg-al-background md:light:bg-[#f2f2f2] pb-6'
       : '',
   );
 }

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html

@@ -3,9 +3,11 @@
   class="bg-al-footer-background w-full"
 >
   <div
-    class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
+    class="mx-auto grid max-w-(--breakpoint-xl) grid-cols-1 items-start gap-y-4 px-6 py-4 sm:grid-cols-2 sm:justify-items-stretch xl:grid-cols-[auto_1fr_auto] xl:justify-items-center xl:px-0"
   >
-    <div class="logo-container">
+    <div
+      class="order-1 flex flex-col sm:justify-self-center xl:justify-self-start"
+    >
       <div>
         <al-footer-logo class="mb-1 block" />
         <div class="text-al-muted mb-4 inline-block max-w-48 text-xs">
@@ -14,13 +16,15 @@
       </div>
       <al-footer-social-media-icons class="block lg:ml-2" />
     </div>
+
     <al-navigation
-      class="navigation-component"
+      class="order-3 sm:col-span-2 xl:order-2 xl:col-span-1"
       [whiteFont]="true"
       [cols]="isXlScreen() ? 2 : undefined"
       [navItems]="navItems"
     />
-    <div class="partners-container">
+
+    <div class="order-2 sm:justify-self-end xl:order-3">
       <div class="mb-5 flex gap-2">
         <h2>{{ t('mainPartner') }}</h2>
         <a href="https://houseofangular.io/">
@@ -30,6 +34,7 @@ <h2>{{ t('mainPartner') }}</h2>
       <al-partners [partnerList]="partnersList" heading="footer.partners" />
     </div>
   </div>
+
   <small class="text-al-muted block pb-4 text-center text-xs">
     Copyright &#169; {{ currentYear }}
   </small>

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss

@@ -1,45 +0,0 @@
-.logo-container {
-  grid-area: logo;
-  display: flex;
-  flex-direction: column;
-}
-
-.navigation-component {
-  grid-area: nav;
-}
-
-.partners-container {
-  grid-area: partners;
-}
-
-.al-container {
-  justify-items: center;
-  row-gap: 1rem;
-  grid-template-areas:
-    'logo'
-    'partners'
-    'nav';
-
-  align-items: start;
-}
-
-@screen sm {
-  .al-container {
-    justify-items: stretch;
-    grid-template-areas:
-      'logo partners'
-      'nav nav';
-  }
-
-  .logo-container {
-    justify-self: center;
-  }
-}
-
-@screen xl {
-  .al-container {
-    grid-template-areas: 'logo nav partners';
-    grid-template-columns: auto 1fr auto;
-    justify-items: center;
-  }
-}

libs/blog/layouts/ui-layouts/src/lib/header/components/header-hamburger.component.ts

@@ -19,9 +19,9 @@ import { FastSvgComponent } from '@push-based/ngx-fast-svg';
       @if (isOpened()) {
         <fast-svg name="cross" aria-hidden="true" />
       } @else {
-        <div class="bg-al-primary-foreground h-1 w-full rounded"></div>
-        <div class="bg-al-primary-foreground h-1 w-full rounded"></div>
-        <div class="bg-al-primary-foreground h-1 w-full rounded"></div>
+        <div class="bg-al-primary-foreground h-1 w-full rounded-sm"></div>
+        <div class="bg-al-primary-foreground h-1 w-full rounded-sm"></div>
+        <div class="bg-al-primary-foreground h-1 w-full rounded-sm"></div>
       }
     </button>
   `,

libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts

@@ -16,9 +16,9 @@ import { headerNavItems } from '../header-nav-items';
   selector: 'al-header-mobile-menu',
   template: `
     <div
-      class="bg-al-background fixed -top-[100%] left-0 z-40 flex h-full w-full flex-row items-center justify-center transition-transform duration-300 lg:hidden"
+      class="bg-al-background fixed -top-full left-0 z-40 flex h-full w-full flex-row items-center justify-center transition-transform duration-300 lg:hidden"
       [inert]="!isOpened()"
-      [class.translate-y-[100%]]="isOpened()"
+      [class.translate-y-full]="isOpened()"
     >
       <al-navigation
         class="mobile-menu__navigation"

libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts

@@ -29,7 +29,7 @@ import { headerNavItems } from './header-nav-items';
       class="bg-al-background/95 z-30 h-20 w-full border-b shadow-xl"
     >
       <div
-        class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-0"
+        class="mx-auto flex h-full w-full max-w-(--breakpoint-xl) items-center justify-between px-6 py-4 xl:px-0"
       >
         <al-header-logo />
 

libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html

@@ -1,7 +1,7 @@
 <main
   class="mx-auto h-full w-full px-2 py-4 md:px-4 xl:px-0"
   [class]="{
-    'max-w-screen-xl': !layoutConfig()?.roadmap,
+    'max-w-(--breakpoint-xl)': !layoutConfig()?.roadmap,
     'overflow-hidden': layoutConfig()?.roadmap,
     'max-h-full': layoutConfig()?.roadmap,
   }"

libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts

@@ -24,7 +24,7 @@ import { Lang } from '@angular-love/contracts/articles';
         <fast-svg
           name="translate"
           aria-hidden="true"
-          class="text-al-primary pointer-events-none absolute left-0 top-1/2 !block -translate-y-1/2"
+          class="text-al-primary pointer-events-none absolute top-1/2 left-0 block! -translate-y-1/2"
           size="20"
         />
 
@@ -44,7 +44,7 @@ import { Lang } from '@angular-love/contracts/articles';
         <fast-svg
           name="arrow-down"
           aria-hidden="true"
-          class="pointer-events-none absolute right-0 top-1/2 !block -translate-y-1/2"
+          class="pointer-events-none absolute top-1/2 right-0 block! -translate-y-1/2"
           size="20"
         />
       </label>

libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html

@@ -16,7 +16,7 @@
             <input
               aria-required="true"
               type="text"
-              class="bg-al-background text-al-muted border-al-border my-2 h-[60px] w-full flex-grow rounded-md border p-6 text-sm"
+              class="bg-al-background text-al-muted border-al-border my-2 h-[60px] w-full grow rounded-md border p-6 text-sm"
               [attr.aria-label]="t('namePlaceholder')"
               [placeholder]="t('namePlaceholder')"
               formControlName="name"
@@ -26,7 +26,7 @@
               <input
                 aria-required="true"
                 type="email"
-                class="bg-al-background text-al-muted border-al-border h-[60px] w-full flex-grow rounded-l-md border border-r-0 p-6 text-sm"
+                class="bg-al-background text-al-muted border-al-border h-[60px] w-full grow rounded-l-md border border-r-0 p-6 text-sm"
                 [attr.aria-label]="t('emailPlaceholder')"
                 [placeholder]="t('emailPlaceholder')"
                 formControlName="email"
@@ -54,7 +54,7 @@
               />
               <label
                 id="newsletter-label"
-                class="text-al-muted flex flex-col peer-checked:[&>div>div>div]:block"
+                class="text-al-muted flex flex-col [&>div>div>div]:peer-checked:block"
                 for="newsletter-checkbox"
               >
                 @if (newsletterStoreLoading() === 'error') {
@@ -65,7 +65,7 @@
                     tabindex="0"
                     aria-describedby="consent-text"
                     role="checkbox"
-                    class="border-al-muted mr-2 mt-1 flex aspect-square h-[14px] items-center justify-center rounded border"
+                    class="border-al-muted mt-1 mr-2 flex aspect-square h-[14px] items-center justify-center rounded-sm border"
                     [attr.aria-label]="t('label')"
                     [attr.aria-checked]="form.controls.checkbox.value"
                     (keydown.space)="
@@ -77,7 +77,7 @@
                     "
                   >
                     <div
-                      class="bg-al-pink hidden h-[6px] w-[6px] rounded-sm"
+                      class="bg-al-pink hidden h-[6px] w-[6px] rounded-xs"
                     ></div>
                   </div>
                   <span