chore: update tailwindcss to v4

app/page.tsx

@@ -1,4 +1,3 @@
-
 import { Metadata } from "next"
 import { Button } from "components/Button/Button"
 
@@ -25,12 +24,12 @@ export default function Web() {
   return (
     <>
       <section className="bg-white dark:bg-gray-900">
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+        <div className="mx-auto grid max-w-(--breakpoint-xl) px-4 py-8 text-center lg:py-16">
           <div className="mx-auto place-self-center">
-            <h1 className="mb-4 size-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl">
+            <h1 className="mb-4 max-w-2xl text-4xl leading-none font-extrabold tracking-tight md:text-5xl xl:text-6xl dark:text-white">
               Next.js Enterprise Boilerplate
             </h1>
-            <p className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl">
+            <p className="mb-6 max-w-2xl font-light text-gray-500 md:text-lg lg:mb-8 lg:text-xl dark:text-gray-400">
               Jumpstart your enterprise project with our feature-packed, high-performance Next.js boilerplate!
               Experience rapid UI development, AI-powered code reviews, and an extensive suite of tools for a smooth and
               enjoyable development process.
@@ -48,11 +47,11 @@ export default function Web() {
         </div>
       </section>
       <section className="bg-white dark:bg-gray-900">
-        <div className="mx-auto max-w-screen-xl px-4 py-8 sm:py-16 lg:px-6">
+        <div className="mx-auto max-w-(--breakpoint-xl) px-4 py-8 sm:py-16 lg:px-6">
           <div className="justify-center space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0 lg:grid-cols-3">
             {LP_GRID_ITEMS.map((singleItem) => (
               <div key={singleItem.title} className="flex flex-col items-center justify-center text-center">
-                <div className="mb-4 flex size-10 items-center justify-center rounded-full bg-primary-100 p-1.5 text-blue-700 dark:bg-primary-900 lg:size-12">
+                <div className="bg-primary-100 dark:bg-primary-900 mb-4 flex size-10 items-center justify-center rounded-full p-1.5 text-blue-700 lg:size-12">
                   {singleItem.icon}
                 </div>
                 <h3 className="mb-2 text-xl font-bold dark:text-white">{singleItem.title}</h3>

components/Tooltip/Tooltip.tsx

@@ -8,10 +8,10 @@ import { twMerge } from "tailwind-merge"
 const tooltipContent = cva([], {
   variants: {
     intent: {
-      primary: ["rounded-0.5md", "bg-zinc-700", "font-open-sans", "text-white"],
+      primary: ["rounded-md", "bg-zinc-700", "font-sans", "text-white"],
     },
     size: {
-      md: ["px-4", "py-2.5", "text-2xs"],
+      md: ["px-4", "py-2.5", "text-xs"],
     },
   },
   defaultVariants: {

eslint.config.mjs

@@ -1,6 +1,7 @@
 import * as fs from "fs"
 
-import eslintPluginTailwindcss from "eslint-plugin-tailwindcss"
+// https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/381
+// import eslintPluginTailwindcss from "eslint-plugin-tailwindcss"
 import eslintPluginImport from "eslint-plugin-import"
 import eslintPluginNext from "@next/eslint-plugin-next"
 import eslintPluginStorybook from "eslint-plugin-storybook"
@@ -23,7 +24,8 @@ const config = typescriptEslint.config(
     ignores: eslintIgnore,
   },
   ...eslintPluginStorybook.configs["flat/recommended"],
-  ...eslintPluginTailwindcss.configs["flat/recommended"],
+  //  https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/381
+  // ...eslintPluginTailwindcss.configs["flat/recommended"],
   typescriptEslint.configs.recommended,
   eslintPluginImport.flatConfigs.recommended,
   {

package.json

@@ -76,6 +76,7 @@
     "@storybook/react": "^7.5.3",
     "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@total-typescript/ts-reset": "^0.5.1",
@@ -85,7 +86,6 @@
     "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "8.21.0",
     "all-contributors-cli": "^6.26.1",
-    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
@@ -102,10 +102,10 @@
     "postcss": "^8",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prettier-plugin-tailwindcss": "^0.6.10",
     "semantic-release": "^22.0.8",
     "storybook": "^7.5.3",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.0",
     "ts-jest": "^29.1.1",
     "tsc": "^2.0.4",
     "typed-query-selector": "^2.12.0",

postcss.config.js

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

styles/tailwind.css

@@ -1,3 +1,21 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

tailwind.config.js

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { pick, omit } = require("lodash")
-const colors = require("tailwindcss/colors")
 const defaultTheme = require("tailwindcss/defaultTheme")
 
 /** @type {import('tailwindcss').Config} */