Merge pull request #1834 from LordRonz/feat/migrate-tailwindcss-v4

feat: migrate tailwindcss v4 🚀

.gitattributes

@@ -52,6 +52,7 @@
 *.tsx             text
 *.xml             text
 *.xhtml           text diff=html
+*.mdx             linguist-detectable=false
 
 # Docker
 Dockerfile        text

.stylelintrc.json

@@ -1,7 +1,21 @@
 {
   "extends": ["stylelint-config-standard"],
   "rules": {
-    "at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "layer"] }],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "layer",
+          "plugin",
+          "config",
+          "utility",
+          "theme",
+          "reference"
+        ]
+      }
+    ],
+    "import-notation": null,
     "at-rule-no-deprecated": null,
     "property-no-vendor-prefix": [true, { "ignoreProperties": ["transform"] }]
   }

package.json

@@ -122,6 +122,7 @@
     "@storybook/test": "^8.5.1",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -136,7 +137,6 @@
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
     "chalk": "^5.4.1",
     "cli-table3": "^0.6.5",
     "commander": "^13.1.0",
@@ -147,7 +147,7 @@
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
     "cypress": "^14.0.0",
-    "daisyui": "^4.12.23",
+    "daisyui": "5.0.0-beta.2",
     "esbuild": "^0.24.2",
     "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
@@ -189,7 +189,7 @@
     "stylelint": "^16.13.2",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-standard": "^37.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "to-vfile": "^8.0.0",
     "ts-node": "^10.9.2",

postcss.config.mjs

@@ -1,18 +1,6 @@
 const postcssConfig = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-    'postcss-flexbugs-fixes': {},
-    'postcss-preset-env': {
-      autoprefixer: {
-        flexbox: 'no-2009',
-      },
-      stage: 3,
-      features: {
-        'custom-properties': false,
-      },
-    },
-    ...(process.env.NODE_ENV === 'production' && { cssnano: {} }),
+    '@tailwindcss/postcss': {},
   },
 };
 

src/app/apple-icon.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from 'next/og';
 
 import { WEBSITE_URL } from '@/constants/env';

src/app/icon.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from 'next/og';
 
 import { WEBSITE_URL } from '@/constants/env';

src/components/Accent.tsx

@@ -8,7 +8,7 @@ const Accent = ({ children, className }: AccentType) => {
       className={clsxm(
         'transition-all',
         // 'from-primary-300/40 to-primary-400/40 via-primary-300/40',
-        'bg-gradient-to-tr bg-[length:200%_auto] from-primary-300 via-rose-700/70 to-sky-500 bg-clip-text text-transparent dark:from-primary-300 dark:via-primary-100/70 dark:to-sky-300',
+        'bg-linear-to-tr bg-[length:200%_auto] from-primary-300 via-rose-700/70 to-sky-500 bg-clip-text text-transparent dark:from-primary-300 dark:via-primary-100/70 dark:to-sky-300',
         'animate-bg-position',
         className,
       )}

src/components/ColorModeToggle.tsx

@@ -29,7 +29,7 @@ const ColorModeToggle = ({
       <button
         aria-label='Color mode toggle'
         className={clsxm(
-          'flex h-full w-full items-center justify-center rounded-full ring-primary-300 transition-all hover:bg-gray-400 focus:ring dark:hover:bg-gray-500',
+          'flex h-full w-full items-center justify-center rounded-full ring-primary-300 transition-all hover:bg-gray-400 focus:ring-3 dark:hover:bg-gray-500',
           buttonClassName,
         )}
         type='button'

src/components/Marker.tsx

@@ -10,7 +10,7 @@ export const Marker = ({ children, className }: MarkerProps) => {
     <>
       <mark
         className={clsxm(
-          'marked-text rounded-md bg-inherit bg-gradient-to-r from-primary-100 from-50% to-transparent to-50% px-1 text-dark transition-all dark:from-primary-600 dark:to-black dark:text-light',
+          'marked-text rounded-md bg-inherit bg-linear-to-r from-primary-100 from-50% to-transparent to-50% px-1 text-dark transition-all dark:from-primary-600 dark:to-black dark:text-light',
           className,
         )}
       >

src/components/NowPlaying.tsx

@@ -62,10 +62,7 @@ export const AnimatedBars = ({
   }, []);
 
   return (
-    <div
-      className='flex w-auto flex-shrink-0 items-end overflow-hidden'
-      {...rest}
-    >
+    <div className='flex w-auto shrink-0 items-end overflow-hidden' {...rest}>
       <span
         id='bar1'
         className='mr-[3px] h-2 w-1 bg-primary-300 opacity-75 dark:bg-primary-500'
@@ -95,11 +92,11 @@ const NowPlaying = () => {
         <div
           className={clsxm(
             !!data?.songUrl && 'box',
-            'mb-8 flex w-full max-w-sm items-center justify-center gap-x-2 rounded-sm px-2 py-1 md:max-w-screen-md',
+            'mb-8 flex w-full max-w-sm items-center justify-center gap-x-2 rounded-xs px-2 py-1 md:max-w-(--breakpoint-md)',
           )}
           ref={ref}
         >
-          <svg className='ml-auto h-4 w-4 flex-shrink-0' viewBox='0 0 168 168'>
+          <svg className='ml-auto h-4 w-4 shrink-0' viewBox='0 0 168 168'>
             <path
               fill='#1ED760'
               d='M83.996.277C37.747.277.253 37.77.253 84.019c0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l.001-.004zm38.404 120.78a5.217 5.217 0 01-7.18 1.73c-19.662-12.01-44.414-14.73-73.564-8.07a5.222 5.222 0 01-6.249-3.93 5.213 5.213 0 013.926-6.25c31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-.903-8.148-4.35a6.538 6.538 0 014.354-8.143c30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-.001zm.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219a7.835 7.835 0 015.221-9.771c29.581-8.98 78.756-7.245 109.83 11.202a7.823 7.823 0 012.74 10.733c-2.2 3.722-7.02 4.949-10.73 2.739z'

src/components/ScrollButton.tsx

@@ -56,7 +56,7 @@ const ScrollButton = ({
       <button
         type='button'
         className={clsxm(
-          'inline-flex items-center justify-center rounded-md border border-transparent bg-rose-500 p-2 text-white hover:bg-rose-400 focus:outline-none dark:bg-slate-800 dark:hover:bg-slate-700',
+          'inline-flex items-center justify-center rounded-md border border-transparent bg-rose-500 p-2 text-white hover:bg-rose-400 focus:outline-hidden dark:bg-slate-800 dark:hover:bg-slate-700',
           className,
         )}
         onClick={(): void => scrollToTop()}

src/components/buttons/Button.tsx

@@ -33,9 +33,9 @@ const Button = ({
       disabled={disabled}
       aria-label={rest['aria-label'] ?? 'A custom button'}
       className={clsxm(
-        'inline-flex items-center rounded px-4 py-2 font-semibold',
-        'focus:outline-none focus-visible:ring focus-visible:ring-primary-500',
-        'shadow-sm',
+        'inline-flex items-center rounded-sm px-4 py-2 font-semibold',
+        'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-500',
+        'shadow-xs',
         !disabled
           ? 'animate-shadow scale-100 transform-gpu transition duration-300 hover:scale-[1.03] active:scale-[0.97]'
           : '',
@@ -75,7 +75,7 @@ const Button = ({
         ],
         'disabled:cursor-not-allowed',
         isLoading &&
-          'relative !cursor-wait !text-transparent !transition-none hover:!text-transparent',
+          'relative cursor-wait! text-transparent! transition-none! hover:text-transparent!',
         className,
       )}
       {...rest}

src/components/buttons/ButtonV2.tsx

@@ -5,15 +5,15 @@ import * as React from 'react';
 import clsxm from '@/lib/clsxm';
 
 const buttonVariants = cva(
-  'group inline-flex items-center justify-center rounded whitespace-nowrap font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300 active:scale-[0.99] duration-500 hover:scale-[1.02]',
+  'group inline-flex items-center justify-center rounded-sm whitespace-nowrap font-medium ring-offset-white transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300 active:scale-[0.99] duration-500 hover:scale-[1.02]',
   {
     variants: {
       variant: {
         default: 'bg-zinc-900 text-zinc-50 dark:text-zinc-900 dark:bg-zinc-50',
         destructive:
           'bg-red-500 text-zinc-50 dark:bg-red-900 dark:text-zinc-50',
         outline:
-          'border border-zinc-300 bg-white dark:border-zinc-800 dark:bg-zinc-950 hover:dark:bg-zinc-800 hover:bg-zinc-200',
+          'border border-zinc-300 bg-white dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 hover:bg-zinc-200',
         secondary:
           'bg-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-50',
         ghost: 'hover:bg-zinc-200 dark:hover:bg-zinc-700',

src/components/buttons/CoolButton.tsx

@@ -35,7 +35,7 @@ const CoolButton = ({
           width={w}
           height={h}
           className={clsxm(
-            'group cursor-pointer overflow-visible focus:outline-none',
+            'group cursor-pointer overflow-visible focus:outline-hidden',
             'scale-100 transform-gpu transition duration-300 hover:scale-[1.03] active:scale-[0.97]',
             'text-sm md:text-base',
             className,

src/components/buttons/ShimmerButton.tsx

@@ -5,7 +5,7 @@ import { Button } from './ButtonV2';
 
 export const ShimmerButton = ({ ...props }: ButtonProps) => {
   return (
-    <div className='relative overflow-hidden rounded-full dark:bg-zinc-900 bg-white shadow border dark:border-zinc-800 group border-zinc-400 p-0.5'>
+    <div className='relative overflow-hidden rounded-full dark:bg-zinc-900 bg-white shadow-sm border dark:border-zinc-800 group border-zinc-400 p-0.5'>
       <span className='absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] dark:bg-[conic-gradient(from_90deg_at_50%_50%,var(--clr-primary-400)_0%,#09090B_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,var(--clr-primary-400)_0%,#fff_5%)] group-hover:bg-none' />
       <Button
         {...props}

src/components/buttons/ShinyButton.tsx

@@ -7,7 +7,7 @@ export const ShinyButton = ({ ...props }: ButtonProps) => {
     <Button
       {...props}
       className={clsxm(
-        'animate-bg-shine border-[1px] rounded-lg shadow bg-[length:200%_100%] tracking-wide',
+        'animate-bg-shine border-[1px] rounded-lg shadow-sm bg-[length:200%_100%] tracking-wide',
         'dark:bg-[linear-gradient(110deg,#09090B,45%,#27272A,55%,#09090B)] dark:text-zinc-200 dark:border-zinc-800',
         'bg-[linear-gradient(110deg,#FFF,45%,#E4E4E7,55%,#FFF)] text-zinc-800 border-zinc-300',
         props.className,

src/components/content/BackgroundGradient.tsx

@@ -41,7 +41,7 @@ export const BackgroundGradient = ({
           backgroundSize: animate ? '400% 400%' : undefined,
         }}
         className={clsxm(
-          'absolute inset-0 rounded-3xl z-[1] opacity-60 group-hover:opacity-100 blur-xl  transition duration-500 will-change-transform',
+          'absolute inset-0 rounded-3xl z-1 opacity-60 group-hover:opacity-100 blur-xl  transition duration-500 will-change-transform',
           ' bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]',
         )}
       />
@@ -62,7 +62,7 @@ export const BackgroundGradient = ({
           backgroundSize: animate ? '400% 400%' : undefined,
         }}
         className={clsxm(
-          'absolute inset-0 rounded-3xl z-[1] will-change-transform',
+          'absolute inset-0 rounded-3xl z-1 will-change-transform',
           'bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]',
         )}
       />

src/components/content/CustomCode.tsx

@@ -58,12 +58,12 @@ const CustomCode = (
       {!!language && (
         <>
           <div className='absolute left-6 top-0 rounded-b-md border border-t-0 border-gray-600 px-2 py-1'>
-            <span className='select-none bg-gradient-to-tr from-primary-300 to-primary-400 bg-clip-text font-medium text-transparent'>
+            <span className='select-none bg-linear-to-tr from-primary-300 to-primary-400 bg-clip-text font-medium text-transparent'>
               {language}
             </span>
           </div>
           <CopyToClipboard text={textToCopy} onCopy={onCopy}>
-            <button className='absolute md:right-2 md:top-2 right-1 top-1 block rounded border border-gray-600 p-2 text-lg transition-colors hover:bg-gray-400 hover:dark:bg-gray-700 md:block'>
+            <button className='absolute md:right-2 md:top-2 right-1 top-1 block rounded-sm border border-gray-600 p-2 text-lg transition-colors hover:bg-gray-400 dark:hover:bg-gray-700 md:block'>
               <label
                 className={clsxm(
                   'swap swap-rotate grid',

src/components/content/Quote.tsx

@@ -7,7 +7,12 @@ type QuoteProps = {
 
 const Quote = ({ className, quote, author }: QuoteProps) => {
   return (
-    <figure className={clsxm('mx-auto max-w-screen-md text-center', className)}>
+    <figure
+      className={clsxm(
+        'mx-auto max-w-(--breakpoint-md) text-center',
+        className,
+      )}
+    >
       <svg
         aria-hidden='true'
         className='mx-auto mb-3 h-12 w-12 text-gray-400 dark:text-gray-600'

src/components/content/SingleProductContentPage.tsx

@@ -85,9 +85,9 @@ const SingleProductContentPage = ({
                   <UnstyledLink
                     href={COMMIT_HISTORY_LINK}
                     className={clsxm(
-                      'inline-flex items-center gap-1 rounded-sm font-medium',
+                      'inline-flex items-center gap-1 rounded-xs font-medium',
                       'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-primary-300',
-                      'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
+                      'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
                     )}
                   >
                     <MdHistory className='text-lg' />
@@ -105,7 +105,7 @@ const SingleProductContentPage = ({
 
             <hr className='dark:border-gray-600' />
 
-            <section className='lg:grid lg:grid-cols-[auto,250px] lg:gap-8'>
+            <section className='lg:grid lg:grid-cols-[auto_250px] lg:gap-8'>
               <article className='mdx prose mx-auto mt-4 w-full transition-colors dark:prose-invert'>
                 <Component
                   components={

src/components/content/SplitImage.tsx

@@ -3,7 +3,7 @@ const SplitImage = ({ children }: { children: React.ReactNode }) => {
 };
 
 export const Split = ({ children }: { children: React.ReactNode }) => {
-  return <div className='!mb-0 flex flex-col space-y-4'>{children}</div>;
+  return <div className='mb-0! flex flex-col space-y-4'>{children}</div>;
 };
 
 export default SplitImage;

src/components/content/Tag.tsx

@@ -18,7 +18,7 @@ const Tag = ({ children, className, onClick, tag, ...rest }: TagProps) => {
         'inline-block rounded-md px-1.5 py-0.5 font-medium transition-colors',
         'bg-gray-100 text-gray-700 hover:text-black disabled:bg-gray-200 disabled:text-gray-300',
         'dark:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:disabled:bg-gray-600 dark:disabled:text-gray-500',
-        'focus:outline-none focus-visible:ring focus-visible:ring-primary-300 disabled:cursor-not-allowed',
+        'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300 disabled:cursor-not-allowed',
 
         className,
       )}
@@ -42,7 +42,7 @@ export const SkipNavTag = ({
           'inline-block rounded-md px-1.5 py-0.5 font-medium transition',
           'bg-gray-100 text-gray-700 hover:text-black disabled:bg-gray-200 disabled:text-gray-300',
           'dark:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:disabled:bg-gray-600 dark:disabled:text-gray-500',
-          'focus:outline-none focus-visible:ring focus-visible:ring-primary-300 disabled:cursor-not-allowed',
+          'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300 disabled:cursor-not-allowed',
           'pointer-events-none absolute opacity-0 focus:inline-block focus:translate-y-[1.4rem] focus:opacity-100',
         )}
         {...rest}

src/components/content/blog/BlogCard.tsx

@@ -20,7 +20,7 @@ const BlogCard = ({ post, className, checkTagged }: BlogCardProps) => {
     <li
       className={clsxm(
         'w-full rounded-md border border-gray-300 bg-gray-200 dark:border-gray-600 dark:bg-dark',
-        'scale-100 hover:scale-[1.02] hover:border-primary-300 active:scale-[0.97] motion-safe:transform-gpu hover:dark:border-primary-300',
+        'scale-100 hover:scale-[1.02] hover:border-primary-300 active:scale-[0.97] motion-safe:transform-gpu dark:hover:border-primary-300',
         'transition duration-100',
         'motion-reduce:hover:scale-100',
         'animate-shadow',
@@ -29,7 +29,7 @@ const BlogCard = ({ post, className, checkTagged }: BlogCardProps) => {
       title={post.title}
     >
       <UnstyledLink
-        className='block h-full rounded-md focus:outline-none focus-visible:ring focus-visible:ring-primary-300'
+        className='block h-full rounded-md focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300'
         href={`/blog/${post.slug}`}
         data-umami-event='Blog Card Click'
         data-umami-event-slug={post.slug}
@@ -54,7 +54,7 @@ const BlogCard = ({ post, className, checkTagged }: BlogCardProps) => {
             {post.tags.split(',').map((tag) => (
               <Tag
                 tabIndex={-1}
-                className='bg-opacity-80 dark:!bg-opacity-60'
+                className='bg-gray-100/80 dark:bg-gray-700/60'
                 key={tag}
                 tag={tag}
               >

src/components/content/card/GitHubCard.tsx

@@ -34,7 +34,7 @@ const GitHubCard = ({ repo, className }: GitHubCardProps) => {
       <UnstyledLink
         href={repository.html_url}
         className={clsxm(
-          '!block max-w-xl',
+          'block! max-w-xl',
           'not-prose px-4 py-3',
           'rounded-lg border border-gray-300 dark:border-gray-600',
           'scale-100 transform-gpu hover:scale-[1.02] active:scale-[0.97]',
@@ -45,7 +45,7 @@ const GitHubCard = ({ repo, className }: GitHubCardProps) => {
       >
         <div className='flex items-center gap-2 text-sm md:text-base'>
           <SiGithub className='ml-0.5 shrink-0 text-[1.2em]' />
-          <Accent className={clsxm('truncate overflow-ellipsis font-semibold')}>
+          <Accent className={clsxm('truncate text-ellipsis font-semibold')}>
             {repository.full_name}
           </Accent>
         </div>
@@ -67,7 +67,7 @@ const GitHubCard = ({ repo, className }: GitHubCardProps) => {
   ) : (
     <div
       className={clsxm(
-        'mx-auto !block max-w-xl',
+        'mx-auto block! max-w-xl',
         'not-prose px-4 py-3',
         'rounded-lg border border-gray-300 dark:border-gray-600',
         'animate-pulse bg-gray-300 dark:bg-gray-600',

src/components/forms/Sort.tsx

@@ -53,7 +53,7 @@ const Sort = (props: SortProps) => {
       <Button
         className={clsxm(
           'rounded-md bg-gray-200 py-1 text-left font-medium dark:bg-dark sm:text-sm',
-          'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
+          'focus:outline-hidden focus-visible:ring-3 focus-visible:ring-primary-300',
           'border border-gray-300 dark:border-gray-600',
           'scale-100 transform-gpu hover:scale-[1.03] active:scale-[0.97]',
           'transition duration-100',
@@ -71,7 +71,7 @@ const Sort = (props: SortProps) => {
       </Button>
       <CustomTab
         categories={sortOptionsMemo}
-        className='flex-shrink-0'
+        className='shrink-0'
         onChange={onCustomTabChange}
         defaultIndex={defaultIndex}
       />