fix(examples): downgrade tailwind (#9855)

### Description

Tailwind v4 was showing some bugginess, so we're having to downgrade.
- Not properly resolving packages and CSS with pnpm
- Prefixes not working

Author: anthonyshew

examples/with-tailwind/apps/docs/app/globals.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --foreground-rgb: 0, 0, 0;

examples/with-tailwind/apps/docs/package.json

@@ -4,15 +4,14 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3001",
+    "dev": "next dev --port 3001 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --max-warnings 0",
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@repo/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.0.0",
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -27,7 +26,7 @@
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "5.7.3"
   }
 }

examples/with-tailwind/apps/docs/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    "@tailwindcss/postcss": {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
 };

examples/with-tailwind/apps/web/app/globals.css

@@ -1,4 +1,6 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --foreground-rgb: 0, 0, 0;

examples/with-tailwind/apps/web/package.json

@@ -4,15 +4,14 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3000",
+    "dev": "next dev --port 3000 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --max-warnings 0",
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@repo/ui": "workspace:*",
-    "@tailwindcss/postcss": "^4.0.0",
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -27,7 +26,7 @@
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "5.7.3"
   }
 }

examples/with-tailwind/apps/web/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
-    "@tailwindcss/postcss": {},
+    tailwindcss: {},
+    autoprefixer: {},
   },
 };

examples/with-tailwind/packages/tailwind-config/package.json

@@ -7,6 +7,6 @@
   },
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^3.4.17"
   }
 }

examples/with-tailwind/packages/ui/package.json

@@ -25,11 +25,10 @@
     "@repo/eslint-config": "workspace:*",
     "@repo/tailwind-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
-    "@tailwindcss/cli": "^4.0.0",
     "@types/react": "^19.0.7",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^4.0.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "5.7.3"
   }
 }

examples/with-tailwind/packages/ui/postcss.config.js

@@ -1,7 +1,4 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

examples/with-tailwind/packages/ui/src/styles.css

@@ -1 +1,3 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/with-tailwind/packages/ui/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import sharedConfig from "@repo/tailwind-config/tailwind.config";
+import sharedConfig from "@repo/tailwind-config";
 
 const config: Pick<Config, "prefix" | "presets" | "content"> = {
   content: ["./src/**/*.tsx"],