JeromeFitz · kodiakhq · Mar 17, 2025 · Mar 15, 2025 · Mar 15, 2025 · Mar 16, 2025
diff --git a/.github/actions/e2e/action.yml b/.github/actions/e2e/action.yml
@@ -76,10 +76,10 @@ runs:
     #   #   TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
     #   #   VERCEL_ENV: ${{ inputs.VERCEL_ENV }}
     #   run: |
-    #     pnpm add @lhci/cli@0.12.0 --global
-    #   # pnpm dlx @lhci/cli@0.12.0
+    #     pnpm add @lhci/cli@0.14.0 --global
+    #   # pnpm dlx @lhci/cli@0.14.0
     #   # run: |
-    #   #   npx @lhci/cli@0.12.0 autorun --config="./sites/${{ inputs.WEBSITE }}/lighthouse.config.js"
+    #   #   npx @lhci/cli@0.14.0 autorun --config="./sites/${{ inputs.WEBSITE }}/lighthouse.config.js"
     - name: '💡  Lighthouse: ${{ inputs.WEBSITE }}'
       id: test-lighthouse
       shell: bash

diff --git a/package.json b/package.json
@@ -32,15 +32,16 @@
   },
   "dependencies": {
     "@jeromefitz/conventional-gitmoji": "4.0.16",
-    "@jeromefitz/eslint-config": "5.0.0-canary.44",
+    "@jeromefitz/eslint-config": "5.0.0-canary.45",
     "@jeromefitz/lint-staged": "2.1.4",
     "@jeromefitz/prettier-config": "2.1.6",
     "@jeromefitz/release-notes-generator": "3.1.6",
     "@jeromefitz/semantic": "11.1.4",
     "@jeromefitz/tsconfig": "2.1.0",
     "@manypkg/cli": "0.23.0",
+    "@tailwindcss/postcss": "4.0.14",
     "@types/lodash": "4.17.16",
-    "@types/node": "22.10.2",
+    "@types/node": "22.13.10",
     "ccommit": "3.1.2",
     "concurrently": "9.1.2",
     "dotenv": "16.4.7",
@@ -49,7 +50,7 @@
     "lodash": "4.17.21",
     "semantic-release": "24.2.3",
     "syncpack": "13.0.3",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.14",
     "ts-node": "10.9.2",
     "tsup": "8.4.0",
     "turbo": "2.4.4",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -103,7 +103,7 @@
     "@radix-ui/themes": "3.2.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "tailwind-merge": "2.6.0"
+    "tailwind-merge": "3.0.2"
   },
   "devDependencies": {
     "@jeromefitz/jest-config": "workspace:*",

diff --git a/packages/design-system/src/components/Icon/Icon.tsx b/packages/design-system/src/components/Icon/Icon.tsx
@@ -94,7 +94,9 @@ import { IconProps } from './Icon.types'
  *  Override by passing tailwind className to Icon.XYZ
  *
  */
-const twHeroToRadixIcon = 'mt-[1px] w-[1rem] [&>path]:stroke-[1.5]'
+const twHeroToRadixIcon =
+  'icon-custom mt-[1px] w-[1rem] [&>path]:stroke-[1.5] icon-hero'
+// const twHeroToRadixIcon = ''
 
 const AmazonLogoIcon = ({ label, ...props }: IconProps) => (
   <AccessibleIcon
@@ -104,7 +106,7 @@ const AmazonLogoIcon = ({ label, ...props }: IconProps) => (
     }
   >
     <svg
-      className="fill:bg-black dark:fill:bg-white"
+      className="dark:fill:bg-white fill:bg-black"
       height="17px"
       role="img"
       version="1.1"
@@ -143,7 +145,7 @@ const AppleLogoIcon = ({ label, ...props }: IconProps) => (
     label={label || 'An icon representing the logo of Apple. Which is an apple.'}
   >
     <svg
-      className="fill:bg-black dark:fill:bg-white"
+      className="dark:fill:bg-white fill:bg-black"
       height="17px"
       role="img"
       version="1.1"
@@ -206,6 +208,7 @@ const ArrowUturnLeftIcon = ({ className, label, ...props }: IconProps) => (
   >
     <ArrowUturnLeftHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -231,7 +234,7 @@ const BlueskyLogoIcon = ({ label, ...props }: IconProps) => (
     }
   >
     <svg
-      className="fill:bg-black dark:fill:bg-white"
+      className="dark:fill:bg-white fill:bg-black"
       height="17px"
       role="img"
       version="1.1"
@@ -281,6 +284,7 @@ const BookOpenIcon = ({ className, label, ...props }: IconProps) => (
   >
     <BookOpenIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -433,6 +437,7 @@ const CloudIcon = ({ className, label, ...props }: IconProps) => (
   >
     <CloudIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -593,7 +598,7 @@ const GooglePodcastsLogoIcon = ({ label, ...props }: IconProps) => (
     label={label || 'An icon representing the logo for Google Podcasts.'}
   >
     <svg
-      className="fill:bg-black dark:fill:bg-white"
+      className="dark:fill:bg-white fill:bg-black"
       height="17px"
       role="img"
       version="1.1"
@@ -637,6 +642,7 @@ const HashtagIcon = ({ className, label, ...props }: IconProps) => (
   >
     <HashtagIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -737,6 +743,7 @@ const LocationMarkerIcon = ({ className, label, ...props }: IconProps) => (
   >
     <MapPinIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -763,6 +770,7 @@ const MapIcon = ({ className, label, ...props }: IconProps) => (
   >
     <MapIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -778,6 +786,7 @@ const MicrophoneIcon = ({ className, label, ...props }: IconProps) => (
   >
     <MicrophoneIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -804,6 +813,7 @@ const MusicalNoteIcon = ({ className, label, ...props }: IconProps) => (
   >
     <MusicalNoteIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -857,7 +867,7 @@ const ReturnIcon = ({ className, label, ...props }: IconProps) => (
     }
   >
     <ArrowUturnLeftHero
-      className={cx(twHeroToRadixIcon, 'rotate-180 -scale-x-100', className)}
+      className={cx(twHeroToRadixIcon, '-scale-x-100 rotate-180', className)}
       role="img"
       {...props}
     />
@@ -905,7 +915,7 @@ const SpotifyLogoIcon = ({ label, ...props }: IconProps) => (
     }
   >
     <svg
-      className="fill:bg-black dark:fill:bg-white"
+      className="dark:fill:bg-white fill:bg-black"
       height="17px"
       role="img"
       version="1.1"
@@ -972,6 +982,7 @@ const TagIcon = ({ className, label, ...props }: IconProps) => (
   >
     <TagIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -1026,6 +1037,7 @@ const ThreadsLogoIcon = ({ className, label, ...props }: IconProps) => (
   >
     <AtSymbolIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />
@@ -1041,6 +1053,7 @@ const TicketIcon = ({ className, label, ...props }: IconProps) => (
   >
     <TicketIconHero
       className={cx(twHeroToRadixIcon, className)}
+      data-icon="hero"
       role="img"
       {...props}
     />

diff --git a/packages/design-system/src/components/Section/Section.Header.Title.tsx b/packages/design-system/src/components/Section/Section.Header.Title.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable tailwindcss/no-custom-classname */
 import { cx } from '../../utils/cx'
 
 function SectionHeaderTitle({ children, className = '', isTitle = false }) {
@@ -9,7 +8,7 @@ function SectionHeaderTitle({ children, className = '', isTitle = false }) {
         'md:[writing-mode:lr]',
         isTitle
           ? 'text-xl font-extrabold tracking-tight md:text-3xl'
-          : 'font-bold uppercase tracking-tight md:text-lg md:font-extrabold',
+          : 'font-bold tracking-tight uppercase md:text-lg md:font-extrabold',
         'my-1 py-1 pr-2',
         'md:my-2 md:py-2 md:pr-6',
         'w-11/12',

diff --git a/packages/design-system/src/components/Section/Section.Hero.tsx b/packages/design-system/src/components/Section/Section.Hero.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable tailwindcss/no-custom-classname */
 function SectionHero({ title }) {
   return (
-    <div className="w-full pb-1 pl-0 pr-1 pt-10 text-2xl font-black tracking-tight md:text-6xl">
-      <p className="pointer-events-none -mb-1 ml-0 mr-1">{title}</p>
+    <div className="w-full pt-10 pr-1 pb-1 pl-0 text-2xl font-black tracking-tight md:text-6xl">
+      <p className="pointer-events-none mr-1 -mb-1 ml-0">{title}</p>
     </div>
   )
 }

diff --git a/packages/design-system/src/components/Section/Tags.tsx b/packages/design-system/src/components/Section/Tags.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable tailwindcss/no-custom-classname */
 import { cx } from '../../utils/cx'
 
 function Tags({ className = '', classNameTag = '', tags }) {
@@ -21,7 +20,7 @@ function Tags({ className = '', classNameTag = '', tags }) {
               // `text-radix-${color}11 bg-radix-${color}3 dark:bg-radix-${color}3`,
               'relative rounded-full text-center font-semibold normal-case',
               // mobile (vertical sometimes)
-              '-left-1.5 my-0 mb-2 mr-2',
+              '-left-1.5 my-0 mr-2 mb-2',
               'px-2 py-3',
               // horizontal
               // 'px-3 py-2',

diff --git a/packages/design-system/src/components/SkipNav/SkipNav.tsx b/packages/design-system/src/components/SkipNav/SkipNav.tsx
@@ -24,8 +24,8 @@ const SkipNavLink = forwardRef(function SkipNavLink(
     <Link
       {...props}
       className={cx(
-        'rounded-3 bg-accent-1 absolute right-[100%] top-2 z-50 block p-4',
-        'focus:left-2.5 focus:right-auto',
+        'rounded-3 bg-accent-1 absolute top-2 right-[100%] z-50 block p-4',
+        'focus:right-auto focus:left-2.5',
       )}
       data-skip-nav-content=""
       href={`#${id}`}

diff --git a/packages/design-system/tailwind.config.ts b/packages/design-system/tailwind.config.ts
diff --git a/packages/lighthouse-config/.lighthouserc.cjs b/packages/lighthouse-config/.lighthouserc.cjs
@@ -39,7 +39,7 @@ const config = ({ urlAdditional, website }) => {
           'unused-css-rules': OFF,
           'unused-javascript': OFF,
           'uses-responsive-images': OFF,
-          'uses-text-compression': WARN,
+          'uses-text-compression': OFF,
         },
         preset: 'lighthouse:no-pwa',
       },

diff --git a/packages/next-notion/src/blocks/Emoji.server.tsx b/packages/next-notion/src/blocks/Emoji.server.tsx
@@ -47,7 +47,7 @@ function Emoji({ character }) {
  */
 function EmojiHtml({ emoji, label }) {
   return (
-    <span aria-label={label} className="ml-0.5 mr-1.5" role="img">
+    <span aria-label={label} className="mr-1.5 ml-0.5" role="img">
       {emoji}
     </span>
   )

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -131,7 +131,7 @@
     "react-tweet": "^3.2.0",
     "server-only": "0.0.1",
     "swr": "^2.2.5",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.2.1 || ^3.0.0",
     "valid-url": "^1.0.9"
   },
   "devDependencies": {
@@ -158,7 +158,7 @@
     "server-only": "0.0.1",
     "sharp": "0.33.5",
     "swr": "2.3.3",
-    "tailwind-merge": "2.6.0",
+    "tailwind-merge": "3.0.2",
     "title": "4.0.1",
     "valid-url": "1.0.9"
   },

diff --git a/packages/shared/src/components/Notion/Blocks/Embed.Spotify.tsx b/packages/shared/src/components/Notion/Blocks/Embed.Spotify.tsx
@@ -1,6 +1,6 @@
 function EmbedSpotify({ id }) {
   return (
-    <div className="relative size-full max-h-[480] overflow-hidden [&>*:iframe]:absolute [&>*:iframe]:left-0 [&>*:iframe]:top-0 [&>*:iframe]:size-full [&>*:iframe]:max-h-[600]">
+    <div className="relative size-full max-h-[480] overflow-hidden [&>*:iframe]:absolute [&>*:iframe]:top-0 [&>*:iframe]:left-0 [&>*:iframe]:size-full [&>*:iframe]:max-h-[600]">
       <iframe
         allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
         allowFullScreen

diff --git a/packages/shared/src/components/Notion/Blocks/Video.YouTube.tsx b/packages/shared/src/components/Notion/Blocks/Video.YouTube.tsx
@@ -26,7 +26,7 @@ async function VideoYouTube({ block, url }) {
   const alt = (!!commentBlock && getImageAlt(commentBlock?.results)) || ''
 
   return (
-    <div className="relative size-full max-h-[480] overflow-hidden [&>*:iframe]:absolute [&>*:iframe]:left-0 [&>*:iframe]:top-0 [&>*:iframe]:size-full [&>*:iframe]:max-h-[600]">
+    <div className="relative size-full max-h-[480] overflow-hidden [&>*:iframe]:absolute [&>*:iframe]:top-0 [&>*:iframe]:left-0 [&>*:iframe]:size-full [&>*:iframe]:max-h-[600]">
       <iframe
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen

diff --git a/packages/storybook-config/withTailwindTheme.decorator.tsx b/packages/storybook-config/withTailwindTheme.decorator.tsx
@@ -31,7 +31,7 @@ export const withTailwindTheme = (Story, context) => {
     >
       <Box
         className={cx(
-          'overflow-y-auto overflow-x-hidden lg:overflow-y-auto',
+          'overflow-x-hidden overflow-y-auto lg:overflow-y-auto',
           'selection:bg-gray-12 selection:text-gray-1',
           'bg-white dark:bg-black',
           'font-sans antialiased',

diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
@@ -8,6 +8,7 @@
     "@radix-ui/themes": "3.2.1",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.10",
+    "@tailwindcss/postcss": "4.0.14",
     "@tailwindcss/typography": "0.5.16",
     "autoprefixer": "10.4.21",
     "cssnano": "7.0.6",
@@ -17,8 +18,8 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "sharp": "0.33.5",
-    "tailwindcss": "3.4.17",
-    "tailwindcss-animate": "1.0.7",
-    "tailwindcss-radix": "3.0.5"
+    "tailwindcss": "4.0.14",
+    "tailwindcss-radix": "4.0.2",
+    "tw-animate-css": "1.2.2"
   }
 }
diff --git a/packages/tailwind-config/postcss.config.js b/packages/tailwind-config/postcss.config.js
@@ -1,33 +1,5 @@
-/* eslint-disable perfectionist/sort-objects */
-/** @type {import('postcss-load-config').Config} */
-const configPostcss = {
+export default {
   plugins: {
-    /**
-     * @note(next) documentation shows that autoprefixer should be last
-     * ==========> it should not in this application
-     * ==========> do not move this
-     */
-    autoprefixer: {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    ...(process.env.NODE_ENV === 'production'
-      ? {
-          cssnano: {
-            /**
-             * @note(postcss) issue with calc from *.module.css
-             *
-             * Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
-             */
-            preset: [
-              'default',
-              {
-                calc: false,
-              },
-            ],
-          },
-        }
-      : {}),
+    '@tailwindcss/postcss': {},
   },
 }
-
-export default configPostcss