try remaining changes - not working locally for some reason

e2e/fixtures/monorepo/packages/waku-project/src/pages/_layout.tsx

@@ -1,5 +1,3 @@
-import '../styles.css';
-
 import type { ReactNode } from 'react';
 
 import { Header } from '../components/header';
@@ -11,7 +9,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
   const data = await getData();
 
   return (
-    <div style={{ fontFamily: 'Nunito' }}>
+    <div style={{ fontFamily: 'sans-serif' }}>
       <meta name="description" content={data.description} />
       <link rel="icon" type="image/png" href={data.icon} />
       <Header />

examples/01_template/src/styles.css

@@ -1,21 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
 layer(base);
 @import 'tailwindcss';
-
-/*
-  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);
-  }
-}

examples/02_template_js/src/styles.css

@@ -1,21 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
 layer(base);
 @import 'tailwindcss';
-
-/*
-  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);
-  }
-}

examples/03_demo/src/styles.css

@@ -9,21 +9,3 @@ layer(base);
   --font-nunito: 'Nunito', sans-serif;
   --font-zen-maru-gothic: 'Zen Maru Gothic', serif;
 }
-
-/*
-  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);
-  }
-}

examples/05_compiler/src/styles.css

@@ -1,21 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
 layer(base);
 @import 'tailwindcss';
-
-/*
-  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);
-  }
-}

examples/06_form-demo/src/styles.css

@@ -9,21 +9,3 @@ layer(base);
   --font-nunito: 'Nunito', sans-serif;
   --font-zen-maru-gothic: 'Zen Maru Gothic', serif;
 }
-
-/*
-  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);
-  }
-}

examples/12_nossr/src/styles.css

@@ -1,21 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
 layer(base);
 @import 'tailwindcss';
-
-/*
-  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);
-  }
-}

examples/42_react-tweet/package.json

@@ -16,10 +16,11 @@
     "waku": "0.21.17"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "4.0.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "autoprefixer": "10.4.20",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.0",
     "typescript": "5.7.3"
   }
 }

examples/42_react-tweet/src/styles.css

@@ -1,21 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap')
 layer(base);
 @import 'tailwindcss';
-
-/*
-  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);
-  }
-}

examples/42_react-tweet/waku.config.ts

@@ -0,0 +1,10 @@
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'waku/config';
+
+export default defineConfig({
+  unstable_viteConfigs: {
+    common: () => ({
+      plugins: [tailwindcss()],
+    }),
+  },
+});

packages/website/src/styles.css

@@ -10,24 +10,6 @@ layer(base);
 
 @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);
-  }
-}
-
 @utility text-shadow {
   text-shadow: 0.03125em 0.03125em 0px black;
 }