TailwindCss v4.

Author: vLuckyyy

app/author/[slug]/page.tsx

@@ -66,9 +66,9 @@ export default async function AuthorPage({ params, searchParams }: AuthorPagePro
   );
 
   return (
-    <div className="min-h-screen bg-lightGray-100 pb-12 pt-40 dark:bg-gray-900">
-      <div className="mx-auto max-w-screen-xl px-4">
-        <div className="mx-auto grid max-w-screen-xl grid-cols-1 gap-12 md:grid-cols-3">
+    <div className="min-h-screen bg-light-gray-100 pb-12 pt-40 dark:bg-gray-900">
+      <div className="mx-auto max-w-(--breakpoint-xl) px-4">
+        <div className="mx-auto grid max-w-(--breakpoint-xl) grid-cols-1 gap-12 md:grid-cols-3">
           <aside className="md:col-span-1">
             <AnimatedSection
               animationType="fadeLeft"

app/blog/[slug]/page.tsx

@@ -115,10 +115,10 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
     const tagsArr = getTagsArray(post.tags);
 
     return (
-      <div className="min-h-screen bg-lightGray-100 dark:bg-gray-900">
+      <div className="min-h-screen bg-light-gray-100 dark:bg-gray-900">
         {/* Hero Section */}
         <AnimatedSection animationType="fadeDown" className="pb-0 pt-40 md:pt-48">
-          <div className="mx-auto max-w-screen-xl px-4">
+          <div className="mx-auto max-w-(--breakpoint-xl) px-4">
             <h1 className="mb-4 text-left text-4xl font-extrabold text-gray-900 dark:text-white md:text-5xl">
               {post.title}
             </h1>
@@ -175,7 +175,7 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
 
         {/* Blog Content */}
         <AnimatedSection animationType="fadeUp" className="py-16">
-          <div className="mx-auto max-w-screen-xl px-4">
+          <div className="mx-auto max-w-(--breakpoint-xl) px-4">
             <BlogPostContent content={post.content} />
           </div>
         </AnimatedSection>

app/blog/page.tsx

@@ -47,12 +47,12 @@ export default async function BlogPage() {
   const authors = await getAuthors();
 
   return (
-    <div className="min-h-screen bg-lightGray-100 dark:bg-gray-900">
+    <div className="min-h-screen bg-light-gray-100 dark:bg-gray-900">
       <AnimatedSection
         animationType="fadeDown"
-        className="relative overflow-hidden bg-lightGray-100 px-0 pb-0 pt-56 dark:bg-gray-900 md:pt-60"
+        className="relative overflow-hidden bg-light-gray-100 px-0 pb-0 pt-56 dark:bg-gray-900 md:pt-60"
       >
-        <div className="mx-auto max-w-screen-xl px-4">
+        <div className="mx-auto max-w-(--breakpoint-xl) px-4">
           <div className="flex flex-col md:flex-row md:items-center md:justify-between">
             <div className="min-w-0 flex-1">
               <h1 className="mb-2 text-left text-4xl font-extrabold text-gray-900 dark:text-white md:text-5xl">
@@ -82,7 +82,7 @@ export default async function BlogPage() {
       </AnimatedSection>
 
       <section className="px-0 py-16">
-        <div className="mx-auto max-w-screen-xl px-4">
+        <div className="mx-auto max-w-(--breakpoint-xl) px-4">
           {posts.length > 0 ? (
             <AnimatedContainer
               as="div"

app/docs/[...slug]/page.tsx

@@ -130,10 +130,10 @@ const skeletonKeys = Array.from({ length: 5 }, () => crypto.randomUUID());
 function LoadingFallback() {
   return (
     <div className="animate-pulse space-y-4">
-      <div className="h-8 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
-      <div className="h-4 w-1/2 rounded bg-gray-200 dark:bg-gray-700" />
+      <div className="h-8 w-3/4 rounded-sm bg-gray-200 dark:bg-gray-700" />
+      <div className="h-4 w-1/2 rounded-sm bg-gray-200 dark:bg-gray-700" />
       {skeletonKeys.map((key) => (
-        <div key={key} className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div key={key} className="h-4 rounded-sm bg-gray-200 dark:bg-gray-700" />
       ))}
     </div>
   );

app/docs/layout.tsx

@@ -39,10 +39,10 @@ export const metadata: Metadata = {
 export default function DocsLayout({ children }: { children: ReactNode }) {
   return (
     <div
-      className={`${poppins.className} relative min-h-screen bg-lightGray-100 antialiased transition-colors duration-200 dark:bg-gray-900`}
+      className={`${poppins.className} relative min-h-screen bg-light-gray-100 antialiased transition-colors duration-200 dark:bg-gray-900`}
     >
       <Navbar />
-      <div className="mx-auto min-h-[calc(100vh-7rem)] max-w-screen-xl px-4 py-12 pt-56 md:pt-36">
+      <div className="mx-auto min-h-[calc(100vh-7rem)] max-w-(--breakpoint-xl) px-4 py-12 pt-56 md:pt-36">
         <div className="flex flex-col gap-8 lg:flex-row">
           <SidebarWrapper />
           <main className="flex min-w-0 flex-1 flex-col items-stretch">

app/globals.css

@@ -1,20 +1,82 @@
-@import "../node_modules/@south-paw/typeface-minecraft/index.css";
-@import "prism-tomorrow.css";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import '../node_modules/@south-paw/typeface-minecraft/index.css' layer(base);
+@import './prism-tomorrow.css' layer(base);
+@import 'tailwindcss';
 
-@layer utilities {
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-monospace:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--tw-gradient-stops)
+  );
+
+  --color-gray-50: #f7f8fa;
+  --color-gray-100: #eef1f5;
+  --color-gray-200: #dde2ea;
+  --color-gray-300: #c4cdd8;
+  --color-gray-400: #8d99a9;
+  --color-gray-500: #5d6b7c;
+  --color-gray-600: #3e4a59;
+  --color-gray-700: #2a3441;
+  --color-gray-800: #141a23;
+  --color-gray-850: #131720;
+  --color-gray-900: #0c1218;
+  --color-gray-950: #080c11;
+
+  --color-light-gray-50: #ffffff;
+  --color-light-gray-100: #fafbfc;
+  --color-light-gray-200: #f4f6f8;
+  --color-light-gray-300: #e8ecf1;
+  --color-light-gray-400: #d3d9e0;
+  --color-light-gray-500: #b4bcc8;
+  --color-light-gray-600: #8f99a8;
+  --color-light-gray-700: #6e7a8c;
+  --color-light-gray-800: #4e5b6e;
+  --color-light-gray-850: #3a4655;
+  --color-light-gray-900: #2a3441;
+  --color-light-gray-950: #1a1f27;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+/*
+  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);
+  }
+}
+
+@utility scrollbar-hide {
   /* Hide scrollbar for Chrome, Safari and Opera */
-  .scrollbar-hide::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
 
   /* Hide scrollbar for IE, Edge and Firefox */
-  .scrollbar-hide {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 code[class*="language-"],

app/layout.tsx

@@ -107,7 +107,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning className={poppins.variable}>
       <body
-        className={`${poppins.className} relative min-h-screen bg-lightGray-100 antialiased dark:bg-gray-900`}
+        className={`${poppins.className} relative min-h-screen bg-light-gray-100 antialiased dark:bg-gray-900`}
       >
         <Providers>
           <NextTopLoader

app/not-found.tsx

@@ -15,13 +15,13 @@ const NotFound: FC = () => {
       <div className="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
         <Link
           href="/"
-          className="rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none dark:bg-blue-500 dark:hover:bg-blue-600"
+          className="rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-hidden dark:bg-blue-500 dark:hover:bg-blue-600"
         >
           Go to Homepage
         </Link>
         <Link
           href="/docs"
-          className="rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+          className="rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
         >
           Browse Documentation
         </Link>

app/notification-generator/layout.tsx

@@ -29,7 +29,7 @@ export const metadata: Metadata = {
 
 export default function NotificationGeneratorLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="relative mx-auto min-h-screen max-w-screen-xl bg-lightGray-100 px-4 py-8 pt-32 antialiased dark:bg-gray-900">
+    <div className="relative mx-auto min-h-screen max-w-(--breakpoint-xl) bg-light-gray-100 px-4 py-8 pt-32 antialiased dark:bg-gray-900">
       {children}
     </div>
   );

app/notification-generator/page.tsx

@@ -68,7 +68,7 @@ function PreviewSection({ previewKey, notification, onPlay, delay }: PreviewSect
         <AnimatedElement as="span">
           <motion.button
             onClick={onPlay}
-            className="flex items-center rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+            className="flex items-center rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
             aria-label="Play title animation"