feat: upgrade Tailwind 4.0 in templates

templates/angular-example/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

templates/angular-example/angular.json

@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets", "src/robots.txt"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -82,7 +82,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

templates/angular-example/package.json

@@ -32,17 +32,17 @@
     "@angular-devkit/build-angular": "^19.0.4",
     "@angular/cli": "^19.0.4",
     "@angular/compiler-cli": "^19.0.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/jasmine": "~5.1.5",
-    "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.5.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "typescript": "~5.6.3"
   }
 }

templates/angular-example/src/app/components/backdrop/backdrop.component.html

@@ -1,8 +1,5 @@
 <div
-  [ngClass]="[
-    'fixed inset-0 z-40 bg-white/30 flex items-center justify-center',
-    spinner ? 'backdrop-blur-sm' : 'backdrop-blur-xl'
-  ]">
+  class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
   <div
     *ngIf="spinner"
     class="w-12 h-12 rounded-full animate-spin border-[3px] border-solid border-lavender-blue-600 border-t-transparent"></div>

templates/angular-example/src/app/components/background/background.component.html

@@ -1,5 +1,5 @@
 <div
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
   <img
     src="/assets/juno_illustration.svg"
     role="presentation"

templates/angular-example/src/app/components/button/button.component.html

@@ -1,7 +1,7 @@
 <button
   [disabled]="disabled"
   [ngClass]="[
-    'flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-sm py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff]',
+    'flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff]',
     disabled
       ? 'opacity-25'
       : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'

templates/angular-example/src/app/components/footer/footer.component.html

@@ -1,5 +1,5 @@
 <footer
-  class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
+  class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
   <span class="flex gap-2 items-baseline">
     <svg
       id="Layer_2"

templates/angular-example/src/app/components/home/home.component.html

@@ -1,5 +1,6 @@
 <div class="relative isolate min-h-[100dvh]">
-  <main class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+  <main
+    class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
     <h1 class="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
       Example App
     </h1>

templates/angular-example/src/app/components/modal/modal.component.html

@@ -14,7 +14,7 @@
   <form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
     <div class="relative w-full max-w-xl">
       <textarea
-        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-none"
+        class="form-control block w-full px-3 py-1.5 text-base font-normal m-0 resize-none border-black border-[3px] rounded-xs bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
         rows="{7}"
         placeholder="Your diary entry"
         formControlName="entry"></textarea>

templates/angular-example/src/app/components/table/table.component.html

@@ -5,7 +5,7 @@
 
   <div class="py-2" role="rowgroup">
     <div
-      class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
+      class="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
       role="row"
       *ngFor="let item of docs(); index as i">
       <span role="cell" aria-rowindex="{index}" class="p-1 flex align-center min-w-max">

templates/angular-example/src/styles.scss → templates/angular-example/src/styles.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config "../tailwind.config.js";
 
 @font-face {
   font-family: 'JetBrains Mono';

templates/angular-example/tailwind.config.js

@@ -8,9 +8,6 @@ module.exports = {
       sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans]
     },
     extend: {
-      screens: {
-        tall: {raw: '(min-height: 800px)'}
-      },
       animation: {
         fade: 'fadeIn .25s ease-in-out'
       },

templates/angular-starter/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

templates/angular-starter/angular.json

@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets", "src/robots.txt"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -82,7 +82,7 @@
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

templates/angular-starter/package.json

@@ -31,17 +31,17 @@
     "@angular-devkit/build-angular": "^19.0.4",
     "@angular/cli": "^19.0.4",
     "@angular/compiler-cli": "^19.0.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/jasmine": "~5.1.5",
-    "autoprefixer": "^10.4.20",
     "jasmine-core": "~5.5.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "typescript": "~5.6.3"
   }
 }

templates/angular-starter/src/app/components/article/article.component.html

@@ -3,9 +3,9 @@
   rel="noreferrer noopener"
   target="_blank"
   [attr.aria-label]="ariaLabel"
-  class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+  class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
   <h4
-    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 group-hover:dark:text-white">
+    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white">
     <ng-content select=".title"></ng-content>
   </h4>
 

templates/angular-starter/src/app/components/background/background.component.html

@@ -1,5 +1,5 @@
 <img
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
   src="/assets/juno_illustration.svg"
   role="presentation"
   loading="lazy"

templates/angular-starter/src/app/components/footer/footer.component.html

@@ -1,5 +1,5 @@
 <footer
-  class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
+  class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white">
   <span class="flex gap-2 items-baseline">
     <svg
       id="Layer_2"

templates/angular-starter/src/app/components/hero/hero.component.html

@@ -3,6 +3,6 @@
   rel="noreferrer noopener"
   target="_blank"
   [attr.aria-label]="ariaLabel"
-  class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
+  class="col-span-2 text-center text-lg font-extrabold bg-lavender-blue-500 dark:bg-white text-white dark:text-black dark:hover:text-white py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded-sm transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-400 dark:hover:bg-black active:bg-lavender-blue-600 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
   <ng-content></ng-content>
 </a>

templates/angular-starter/src/app/components/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="relative isolate min-h-[100dvh]">
-  <main class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+  <main class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
     <h1 class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">Welcome to Juno</h1>
 
     <div class="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">

templates/angular-starter/src/styles.scss → templates/angular-starter/src/styles.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config "../tailwind.config.js";
 
 @font-face {
   font-family: 'JetBrains Mono';

templates/astro-starter/astro.config.mjs

@@ -2,14 +2,14 @@ import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import juno from "@junobuild/vite-plugin";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://example.com",
-  integrations: [mdx(), sitemap(), tailwind()],
+  integrations: [mdx(), sitemap()],
   vite: {
-    plugins: [juno({ container: true })],
+    plugins: [tailwindcss(), juno({ container: true })],
   },
   devToolbar: {
     enabled: false,

templates/astro-starter/package.json

@@ -15,13 +15,13 @@
     "@astrojs/mdx": "^4.0.1",
     "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.3",
     "@junobuild/config": "^0.0.17",
     "@junobuild/vite-plugin": "^0.0.19",
+    "@tailwindcss/vite": "^4.0.0",
     "astro": "^5.0.3",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.4.3"
   }
 }

templates/astro-starter/src/components/Article.astro

@@ -15,7 +15,7 @@ const { href, ariaLabel } = Astro.props;
   class="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]"
 >
   <h4
-    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 group-hover:dark:text-white"
+    class="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 dark:group-hover:text-white"
   >
     <slot name="title" />
   </h4>

templates/astro-starter/src/components/Background.astro

@@ -1,5 +1,5 @@
 <img
-  class="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
+  class="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square"
   src="./juno_illustration.svg"
   role="presentation"
   loading="lazy"

templates/astro-starter/src/components/Footer.astro

@@ -1,5 +1,5 @@
 <footer
-  class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
+  class="mx-auto max-w-(--breakpoint-2xl) py-16 md:pt-0 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 md:mt-12 dark:text-white"
 >
   <span class="flex gap-2 items-baseline">
     <svg

templates/astro-starter/src/pages/index.astro

@@ -22,7 +22,7 @@ import { SITE_TITLE, SITE_DESCRIPTION, SITE_SOCIAL_IMAGE } from "../consts";
   <body class="bg-white dark:bg-black">
     <div class="relative isolate min-h-[100dvh]">
       <main
-        class="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]"
+        class="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]"
       >
         <h1
           class="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16"

templates/astro-starter/src/styles/global.css

@@ -1,3 +1,6 @@
+@import "tailwindcss";
+@config "../../tailwind.config.mjs";
+
 @font-face {
   font-family: "JetBrains Mono";
   font-style: normal;

templates/nextjs-example/package.json

@@ -22,14 +22,14 @@
     "@junobuild/config": "^0.0.17",
     "@junobuild/nextjs-plugin": "^0.0.13",
     "@next/eslint-plugin-next": "^15.0.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "^15.0.0-canary.134",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5"
   }
 }

templates/nextjs-example/postcss.config.js

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

templates/nextjs-example/src/app/globals.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config '../../tailwind.config.ts';
 
 @font-face {
   font-family: 'JetBrains Mono';

templates/nextjs-example/src/app/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
   return (
     <>
       <div className="relative isolate min-h-[100dvh]">
-        <main className="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
+        <main className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 [@media(min-height:800px)]:min-h-[calc(100dvh-128px)]">
           <h1 className="dark:text-white text-5xl md:text-6xl font-bold tracking-tight md:pt-24">
             Example App
           </h1>

templates/nextjs-example/src/components/backdrop.tsx

@@ -3,8 +3,7 @@ interface BackdropProps {
 }
 
 export const Backdrop = ({spinner = false}: BackdropProps) => (
-  <div
-    className={`fixed inset-0 z-40 ${spinner ? 'backdrop-blur-sm' : 'backdrop-blur-xl'} bg-white/30 flex items-center justify-center`}>
+  <div className="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl">
     {spinner && (
       <div
         className="w-12 h-12 rounded-full animate-spin

templates/nextjs-example/src/components/background.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 export const Background = () => {
   return (
-    <div className="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
+    <div className="hidden sm:block fixed top-[400px] [@media(min-height:800px)]:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
       <Image
         src="/juno_illustration.svg"
         role="presentation"

templates/nextjs-example/src/components/button.tsx

@@ -11,7 +11,7 @@ export const Button = ({children, onClick, disabled = false}: ButtonProps) => {
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-sm py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
+      className={`flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] ${disabled ? 'opacity-25' : 'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]'}`}>
       {children}
     </button>
   );

templates/nextjs-example/src/components/footer.tsx

@@ -1,6 +1,6 @@
 export const Footer = () => {
   return (
-    <footer className="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
+    <footer className="mx-auto max-w-(--breakpoint-2xl) py-16 px-8 md:px-24 h-24 flex items-center justify-between md:justify-start md:gap-24 dark:text-white">
       <span className="flex gap-2 items-baseline">
         <svg
           id="Layer_2"

templates/nextjs-example/src/components/modal.tsx

@@ -103,7 +103,7 @@ export const Modal = () => {
         m-0
         resize-none
         border-black border-[3px] rounded-sm bg-white shadow-[5px_5px_0px_rgba(0,0,0,1)]
-        focus:outline-none
+        focus:outline-hidden
       "
                 rows={7}
                 placeholder="Your diary entry"

templates/nextjs-example/src/components/table.tsx

@@ -55,7 +55,7 @@ export const Table = () => {
           return (
             <div
               key={key}
-              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
+              className="flex items-center gap-2 px-3 mb-4 border-black dark:border-lavender-blue-500 border-[3px] rounded-sm bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF]"
               role="row">
               <span role="cell" aria-rowindex={index} className="p-1 flex align-center min-w-max">
                 {index + 1} )