src/app/page.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-end h-full w-2/4">
+    <main className="flex flex-col items-center justify-between p-24">
       <h1>Hello world !</h1>
     </main>
   );

tailwind.config.ts

@@ -1,8 +1,5 @@
 import type { Config } from "tailwindcss"
 
-// @ts-ignore
-import {default as flattenColorPalette} from "tailwindcss/lib/util/flattenColorPalette";
-
 const config = {
   darkMode: ["class"],
   content: [
@@ -77,19 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), addVariablesForColors],
+  plugins: [require("tailwindcss-animate")],
 } satisfies Config
 
-// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
-function addVariablesForColors({ addBase, theme }: any) {
-  let allColors = flattenColorPalette(theme("colors"));
-  let newVars = Object.fromEntries(
-    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
-  );
-
-  addBase({
-    ":root": newVars,
-  });
-}
-
 export default config