Tailwind 4 and related fixes

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "singleQuote": true,
   "trailingComma": "none"
 }

apps/cms/postcss.config.mjs

@@ -1,16 +1,7 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
-
 /** @type {import('tailwindcss').Config} */
 const config = {
   plugins: {
-    tailwindcss: {
-      config: path.join(dirname, 'tailwind.config.mjs')
-    },
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 };
 

apps/cms/src/app/(frontend)/globals.css

@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
 
 :root {
   --steel-blue: #588bae;
@@ -9,92 +10,102 @@
   --light-gray: #d0d2d3;
   --eerie-black: #242526;
   --darker-black: #111111;
-  --max-width: 780px;
-  --padding: 2rem;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html,
-body {
-  height: 100%;
-  background: var(--darker-black);
-  color: var(--light-gray);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  line-height: 1.6;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.main {
-  flex: 1;
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: var(--padding);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.footer {
-  width: 100%;
-  max-width: var(--max-width);
-  margin: 0 auto;
-  padding: 2rem var(--padding);
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  font-size: 0.9rem;
-  opacity: 0.7;
-}
-
-.footer a {
-  color: var(--light-gray);
-  text-decoration: none;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.footer a::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  bottom: -2px;
-  left: 0;
-  background-color: currentColor;
-  transform: scaleX(0);
-  transform-origin: right;
-  transition: transform 0.2s ease;
+  --background: var(--darker-black);
+  --foreground: var(--light-gray);
+  /* Shadcn UI */
+  /* --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 3.9%); */
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 3.9%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96.1%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96.1%);
+  --muted-foreground: hsl(0 0% 45.1%);
+  --accent: hsl(0 0% 96.1%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 89.8%);
+  --input: hsl(0 0% 89.8%);
+  --ring: hsl(0 0% 3.9%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --radius: 0.6rem;
 }
 
-.footer a:hover {
-  opacity: 1;
+.dark {
+  --background: var(--darker-black);
+  --foreground: var(--light-gray);
+  /* Shadcn UI */
+  /* --background: hsl(0 0% 3.9%);
+  --foreground: hsl(0 0% 98%); */
+  --card: hsl(0 0% 3.9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 3.9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(0 0% 98%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 14.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 14.9%);
+  --muted-foreground: hsl(0 0% 63.9%);
+  --accent: hsl(0 0% 14.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 14.9%);
+  --input: hsl(0 0% 14.9%);
+  --ring: hsl(0 0% 83.1%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
 }
 
-.footer a:hover::after {
-  transform: scaleX(1);
-  transform-origin: left;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
-@media (max-width: 768px) {
-  :root {
-    --padding: 1.5rem;
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
   }
-
-  .footer {
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
+  body {
+    @apply bg-background text-foreground;
   }
 }

apps/cms/src/app/(frontend)/layout.tsx

@@ -1,6 +1,8 @@
 import { Inter } from 'next/font/google';
 import React from 'react';
 
+import { cn } from '@codeware/shared/util/ui';
+
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -17,17 +19,21 @@ export default async function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <main className="main">{children}</main>
-        <footer className="footer">
+      <body className={cn('flex min-h-screen flex-col', inter.className)}>
+        <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center p-6 sm:p-8">
+          {children}
+        </main>
+        <footer className="mx-auto flex flex-wrap justify-center gap-4 p-6 text-sm opacity-70 hover:opacity-100 hover:transition-opacity sm:flex-nowrap sm:gap-8 sm:p-8">
           <a
+            className="relative after:absolute after:bottom-0 after:left-0 after:h-[1px] after:w-full after:origin-right after:scale-x-0 after:bg-current after:transition-transform after:duration-300 hover:after:origin-left hover:after:scale-x-100"
             href="https://github.com/codeware-sthlm/codeware/tree/main/packages/nx-payload"
             rel="noopener noreferrer"
             target="_blank"
           >
             @cdwr/payload
           </a>
           <a
+            className="relative after:absolute after:bottom-0 after:left-0 after:h-[1px] after:w-full after:origin-right after:scale-x-0 after:bg-current after:transition-transform after:duration-300 hover:after:origin-left hover:after:scale-x-100"
             href="https://payloadcms.com/docs"
             rel="noopener noreferrer"
             target="_blank"

apps/cms/src/app/(payload)/custom.scss

@@ -1,8 +1,6 @@
-/**
- * Do not import base directives here, it will break the payloadcms styles.
- */
-@tailwind components;
-@tailwind utilities;
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is([data-theme='dark'] *));
 
 :root {
   --background: 0 0% 100%;
@@ -49,13 +47,66 @@
   --ring: 240 4.9% 83.9%;
 }
 
-/**
-{
-  @apply border-border;
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer theme {
+  @import 'tailwindcss/theme.css';
+}
+
+@layer base {
+  .twp {
+    @import 'tailwindcss/preflight.css';
+
+    * {
+      @apply border-border outline-ring/50;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }
+
+  .no-twp {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+      all: revert-layer;
+    }
+  }
+}
+
+@layer components;
+
+@layer utilities {
+  @import 'tailwindcss/utilities.css';
 }
-body {
-  @apply bg-background text-foreground;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-} */

apps/cms/src/components/Logo.client.tsx

@@ -4,14 +4,10 @@ import { CdwrCloud } from '@codeware/shared/ui/react-components';
 const Logo: React.FC = () => {
   return (
     <div className="flex flex-col items-center gap-2">
-      <div className="">
-        <CdwrCloud
-          width="100"
-          height="100"
-          className="text-black dark:text-white opacity-80"
-        />
+      <div className="text-black opacity-80 dark:text-white">
+        <CdwrCloud />
       </div>
-      <span className="text-black dark:text-white opacity-30 text-xl font-medium tracking-widest">
+      <span className="text-xl font-medium tracking-widest text-black opacity-30 dark:text-white">
         Codeware CMS
       </span>
     </div>