Migrate to Tailwind CSS v4

package.json

@@ -67,6 +67,7 @@
     "@eslint/js": "9.39.4",
     "@ianvs/prettier-plugin-sort-imports": "4.7.1",
     "@playwright/test": "1.59.1",
+    "@tailwindcss/postcss": "^4.2.4",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "30.0.0",
@@ -75,7 +76,6 @@
     "@types/react": "19.2.14",
     "@typescript-eslint/eslint-plugin": "8.54.0",
     "@typescript-eslint/parser": "8.54.0",
-    "autoprefixer": "10.5.0",
     "eslint": "9.39.4",
     "eslint-config-next": "16.2.4",
     "eslint-config-prettier": "10.1.8",
@@ -92,7 +92,7 @@
     "postcss": "8.5.10",
     "prettier": "3.8.3",
     "prettier-plugin-tailwindcss": "0.7.3",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.2.4",
     "typescript": "5.9.3"
   },
   "pnpm": {

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

src/__tests__/components/layout/Header.test.tsx

@@ -161,7 +161,7 @@ describe('Header Component', () => {
 
     it('should have shadow', () => {
       const { container } = render(<Header />);
-      const innerContainer = container.querySelector('.shadow-sm');
+      const innerContainer = container.querySelector('.shadow-xs');
       expect(innerContainer).toBeInTheDocument();
     });
   });

src/__tests__/components/ui/Button.test.tsx

@@ -164,7 +164,7 @@ describe('Button Component', () => {
     it('should have focus styles', () => {
       render(<Button>Focus</Button>);
       const button = screen.getByRole('button');
-      expect(button).toHaveClass('focus:outline-none');
+      expect(button).toHaveClass('focus:outline-hidden');
       expect(button).toHaveClass('focus:ring-2');
     });
 

src/components/layout/Header.tsx

@@ -61,7 +61,7 @@ export default function Header() {
 
   return (
     <header className='pointer-events-none fixed z-30 flex w-full justify-center'>
-      <div className='pointer-events-auto relative mt-8 flex items-center justify-between gap-3 rounded-full border-[1px] border-solid border-black bg-white/85 px-2 py-2 pl-4 shadow-sm backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/85 sm:gap-16'>
+      <div className='pointer-events-auto relative mt-8 flex items-center justify-between gap-3 rounded-full border-[1px] border-solid border-black bg-white/85 px-2 py-2 pl-4 shadow-xs backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/85 sm:gap-16'>
         <Link
           href='/'
           aria-label='Go to homepage'
@@ -77,7 +77,7 @@ export default function Header() {
 
           <button
             type='button'
-            className='inline-flex h-8 w-8 items-center justify-center rounded-2xl px-2 py-1 text-sm transition-colors hover:bg-neutral-200/75 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:hidden'
+            className='inline-flex h-8 w-8 items-center justify-center rounded-2xl px-2 py-1 text-sm transition-colors hover:bg-neutral-200/75 hover:text-black focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:hidden'
             aria-label={mobileNavOpen ? 'Close menu' : 'Open menu'}
             aria-expanded={mobileNavOpen}
             aria-controls={mobileNavId}
@@ -101,7 +101,7 @@ export default function Header() {
         >
           <nav
             aria-label='Mobile navigation'
-            className='rounded-3xl border border-black bg-white/95 p-2 shadow-sm backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/95'
+            className='rounded-3xl border border-black bg-white/95 p-2 shadow-xs backdrop-blur-md dark:border-white/20 dark:bg-neutral-950/95'
           >
             <ul className='flex flex-col gap-1'>
               {navLinks.map((link) => (

src/components/templates/NewsletterForm.tsx

@@ -181,7 +181,7 @@ export function NewsletterForm() {
           aria-invalid={errors.email ? 'true' : 'false'}
           aria-describedby={errors.email ? 'email-error' : undefined}
           disabled={status === 'loading'}
-          className='w-full rounded-lg border border-black bg-white px-4 py-3 text-base text-text transition-all focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/20 hover:border-primary/50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-white/20 dark:bg-neutral-900 placeholder:text-tertiary'
+          className='w-full rounded-lg border border-black bg-white px-4 py-3 text-base text-text transition-all focus:border-primary focus:outline-hidden focus:ring-4 focus:ring-primary/20 hover:border-primary/50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-white/20 dark:bg-neutral-900 placeholder:text-tertiary'
           placeholder='your@email.com'
         />
         {errors.email && (

src/components/ui/Button.tsx

@@ -40,7 +40,7 @@ export const Button = React.forwardRef<
   ) => {
     const sharedClasses = clsxm(
       'cursor-pointer bg-primary border-text border-solid border inline-flex items-center justify-center px-6 py-1 lowercase rounded-e-lg text-base font-medium',
-      'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-text focus:ring-offset-bg',
+      'focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-text focus:ring-offset-bg',
       'disabled:opacity-50 disabled:cursor-not-allowed',
       'hover:bg-secondary hover:text-white',
       className,

src/components/ui/NavLink.tsx

@@ -23,7 +23,7 @@ const NavLink = ({
       href={href}
       onClick={onClick}
       className={clsxm(
-        'rounded-2xl px-2 py-1 text-sm hover:bg-neutral-200/75 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:text-lg',
+        'rounded-2xl px-2 py-1 text-sm hover:bg-neutral-200/75 hover:text-black focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:text-lg',
         isActive && 'bg-black text-white dark:bg-white dark:text-black',
       )}
     >

src/components/ui/ThemeToggle.tsx

@@ -34,7 +34,7 @@ export function ThemeToggle() {
           ? 'Switch to light mode'
           : 'Switch to dark mode'
       }
-      className='rounded-2xl px-2 py-1 text-sm hover:bg-neutral-200/75 hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:text-lg w-8 h-8 flex items-center justify-center transition-colors'
+      className='rounded-2xl px-2 py-1 text-sm hover:bg-neutral-200/75 hover:text-black focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-bg dark:hover:bg-neutral-700/75 dark:hover:text-white sm:text-lg w-8 h-8 flex items-center justify-center transition-colors'
     >
       <span aria-hidden='true'>{resolvedTheme === 'dark' ? '✺' : '☾'}</span>
     </button>

src/styles/globals.css

@@ -1,26 +1,48 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Semantic palette (driven by --palette-* in :root / .dark) */
+  --color-primary: #ff5c24;
+  --color-secondary: #1f35a5;
+  --color-tertiary: var(--palette-tertiary);
+  --color-text: var(--palette-text);
+  --color-grid: var(--palette-grid);
+  --color-bg: var(--palette-bg);
+
+  --font-primary: 'CircularStd', ui-sans-serif, system-ui, sans-serif;
+  --font-secondary: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
+}
 
 :root {
   --max-width: 975px;
-  --color-bg: #ffffff;
-  --color-text: #121212;
-  --color-tertiary: #8b9094;
-  --color-grid: #f2f2f2;
+  --palette-bg: #ffffff;
+  --palette-text: #121212;
+  --palette-tertiary: #8b9094;
+  --palette-grid: #f2f2f2;
+  --color-bg: var(--palette-bg);
+  --color-text: var(--palette-text);
+  --color-tertiary: var(--palette-tertiary);
+  --color-grid: var(--palette-grid);
 }
 
 .dark {
-  --color-bg: #121212;
-  --color-text: #f5f5f5;
-  --color-tertiary: #9ca3af;
-  --color-grid: #222222;
+  --palette-bg: #121212;
+  --palette-text: #f5f5f5;
+  --palette-tertiary: #9ca3af;
+  --palette-grid: #222222;
+  --color-bg: var(--palette-bg);
+  --color-text: var(--palette-text);
+  --color-tertiary: var(--palette-tertiary);
+  --color-grid: var(--palette-grid);
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 html,