feat(examples): upgrade with-tailwind to TailwindCSS v4 (#10432)

### Description

Upgrading our example to TailwindCSS v4.

### Testing Instructions

- CI
- Make sure the preview deployment is styled correctly

Author: anthonyshew

docs/site/content/docs/guides/tools/tailwind.mdx

@@ -0,0 +1,364 @@
+---
+title: TailwindCSS
+description: Learn how to use TailwindCSS in a Turborepo.
+---
+
+import { PackageManagerTabs, Tabs, Tab } from '#components/tabs';
+import { Callout } from '#components/callout';
+import { Steps, Step } from '#components/steps';
+
+[TailwindCSS](https://tailwindcss.com/) is a CSS framework that allows you to rapidly build modern websites without ever leaving your HTML.
+
+## Quickstart
+
+If you'd rather use a template, this guide is walking throw how to build [this TailwindCSS + Turborepo template](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind).
+
+<PackageManagerTabs>
+
+<Tab value="pnpm">
+
+```bash title="Terminal"
+pnpm dlx create-turbo@latest -e with-tailwind
+```
+
+</Tab>
+
+<Tab value="yarn">
+
+```bash title="Terminal"
+yarn dlx create-turbo@latest -e with-tailwind
+```
+
+</Tab>
+
+<Tab value="npm">
+
+```bash title="Terminal"
+npx create-turbo@latest -e with-tailwind
+```
+
+</Tab>
+
+<Tab value="bun (Beta)">
+
+```bash title="Terminal"
+bunx create-turbo@latest -e with-tailwind
+```
+
+</Tab>
+</PackageManagerTabs>
+
+## Guide
+
+<Callout type="info">This guide is for TailwindCSS v4.</Callout>
+
+<Steps>
+<Step>
+
+### Create a monorepo
+
+If you don't have an existing project, use [create-turbo](/docs/getting-started/installation) to create a new monorepo:
+
+<PackageManagerTabs>
+
+<Tab value="pnpm">
+
+```bash title="Terminal"
+pnpm dlx create-turbo@latest
+```
+
+</Tab>
+
+<Tab value="yarn">
+
+```bash title="Terminal"
+yarn dlx create-turbo@latest
+```
+
+</Tab>
+
+<Tab value="npm">
+
+```bash title="Terminal"
+npx create-turbo@latest
+```
+
+</Tab>
+
+<Tab value="bun (Beta)">
+
+```bash title="Terminal"
+bunx create-turbo@latest
+```
+
+</Tab>
+</PackageManagerTabs>
+
+</Step>
+
+<Step>
+
+### Add TailwindCSS to your application
+
+[Follow TailwindCSS's guides](https://tailwindcss.com/docs/installation/using-vite) to set up TailwindCSS for your frontend framework.
+
+Once completed, we can integrate your UI package into the applications.
+
+</Step>
+
+<Step>
+
+### Create a shared TailwindCSS configuration package
+
+First, build an [Internal Package](https://turborepo.com/docs/core-concepts/internal-packages) with four files:
+
+<Tabs items={["package.json", "tailwind.config.ts", "tsconfig.json", "postcss.config.js (Optional)"]}>
+
+<Tab value="package.json">
+
+This `package.json` installs TailwindCSS so we can create the configuration file and exports the configuration file for use in the rest of the repository.
+
+```json title="./packages/tailwind-config/package.json"
+{
+  "name": "@repo/tailwind-config",
+  "version": "0.0.0",
+  "private": true,
+  "exports": {
+    ".": "./tailwind.config.ts"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "tailwindcss": "^4.1.5"
+  }
+}
+```
+
+</Tab>
+
+<Tab value="tailwind.config.ts">
+
+This `tailwind.config.ts` will be shared to the libraries and applications in the repository.
+
+```ts title="./packages/tailwind-config/tailwind.config.ts"
+import type { Config } from 'tailwindcss';
+
+const config: Omit<Config, 'content'> = {
+  darkMode: 'class',
+};
+export default config;
+```
+
+</Tab>
+
+<Tab value="tsconfig.json">
+
+A simple TypeScript configuration file so we can use TypeScript for the `tailwind.config.ts`
+
+```ts title="./packages/tailwind-config/tconfig.json"
+{
+  "extends": "@repo/typescript-config/base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
+```
+
+</Tab>
+
+<Tab value="postcss.config.js (Optional)">
+
+If your frontends need a PostCSS configuration file, you can create one to share.
+
+```js title="./packages/tailwind-config/postcss.config.js"
+export const postcssConfig = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+```
+
+</Tab>
+</Tabs>
+
+</Step>
+
+<Step>
+
+### Create the UI package
+
+You can now build the components you share to your applications.
+
+For a full example, [visit the source code for `@repo/ui` package in the TailwindCSS example](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui). The files required for your TailwindCSS setup are below.
+
+<Tabs items={["package.json", "turbo.json", "tailwind.config.ts", "styles.css"]}>
+
+<Tab value="package.json">
+
+The `package.json` installs the dependencies for the package, sets up scripts for development and build environments, and marks the exports for the package.
+
+```json title="./packages/ui/package.json"
+{
+  "exports": {
+    "./styles.css": "./dist/index.css",
+    "./*": "./dist/*.js"
+  },
+  "scripts": {
+    "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "build:components": "tsc",
+    "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
+    "dev:components": "tsc --watch"
+  },
+  "devDependencies": {
+    "@repo/tailwind-config": "workspace:*",
+    "@tailwindcss/cli": "^4.1.5",
+    "@tailwindcss/postcss": "^4.1.5",
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^4.1.5"
+  }
+}
+```
+
+<Callout type="good-to-know">
+  Above, we've only included the code related to setting up Tailwind. The full
+  package.json is
+  [here](https://github.com/vercel/turborepo/tree/main/examples/with-tailwind/packages/ui/package.json).
+</Callout>
+
+</Tab>
+
+<Tab value="turbo.json">
+
+Create a `build` and `dev` task that runs the scripts for building of components and style sheets in parallel.
+
+```json title="./packages/ui/turbo.json"
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["build:styles", "build:components"]
+    },
+    "build:styles": {
+      "outputs": ["dist/**"]
+    },
+    "build:components": {
+      "outputs": ["dist/**"]
+    },
+    "dev": {
+      "with": ["dev:styles", "dev:components"]
+    },
+    "dev:styles": {
+      "cache": false,
+      "persistent": true
+    },
+    "dev:components": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
+```
+
+</Tab>
+
+<Tab value="tailwind.config.ts">
+
+Use the shared configuration from the Tailwind configuration package.
+
+```ts title="./packages/ui/turbo.json"
+import sharedConfig from '@repo/tailwind-config';
+
+export default sharedConfig;
+```
+
+</Tab>
+
+<Tab value="styles.css">
+
+```css title="./packages/ui/src/index.css"
+@import 'tailwindcss';
+```
+
+</Tab>
+
+</Tabs>
+
+</Step>
+<Step>
+
+### Use the UI package in an application
+
+Install the packages you've created into your application.
+
+<PackageManagerTabs>
+
+<Tab value="pnpm">
+
+```bash title="Terminal"
+pnpm install @repo/ui @repo/tailwind-config --save-dev --filter=@repo/ui --filter=web
+```
+
+</Tab>
+
+<Tab value="yarn">
+
+```bash title="Terminal"
+yarn workspace web add @repo/ui @repo/tailwind-config --dev
+yarn workspace @repo/ui add @repo/ui @repo/tailwind-config --dev
+```
+
+</Tab>
+
+<Tab value="npm">
+
+```bash title="Terminal"
+npm install @repo/ui @repo/tailwind-config --workspace=web --workspace=@repo/ui --save-dev
+```
+
+</Tab>
+
+<Tab value="bun (Beta)">
+
+```bash title="Terminal"
+bun install @repo/ui @repo/tailwind-config --dev --filter=@repo/ui --filter=web
+```
+
+</Tab>
+</PackageManagerTabs>
+
+Then, configure the files in your application so the styles from the UI package are reflected in the application.
+
+<Tabs items={["tailwind.config.ts", "globals.css", "postcss.config.js (Optional)"]}>
+
+<Tab value="tailwind.config.ts">
+
+```ts title="./apps/web/tailwind.config.ts"
+import sharedConfig from '@repo/tailwind-config';
+
+export default sharedConfig;
+```
+
+</Tab>
+
+<Tab value="globals.css">
+
+```css title="./apps/web/app/globals.css"
+@import 'tailwindcss';
+@import '@repo/ui/styles.css';
+```
+
+</Tab>
+
+<Tab value="postcss.config.js (Optional)">
+
+```js title="./apps/web/postcss.config.js"
+import { postcssConfig } from '@repo/tailwind-config/postcss';
+
+export default postcssConfig;
+```
+
+</Tab>
+
+</Tabs>
+
+</Step>
+
+</Steps>

docs/site/dictionary.txt

@@ -266,3 +266,8 @@ keybinds
 ORM's
 pre-stable
 semver
+v4
+TailwindCSS
+TailwindCSS's
+frontend
+frontends

examples/with-tailwind/apps/docs/README.md

@@ -6,11 +6,11 @@ First, run the development server:
 yarn dev
 ```
 
-Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
 
-To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3001/api/hello](http://localhost:3001/api/hello).
+To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello).
 
 ## Learn More
 

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

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "@repo/ui/styles.css";
 
 :root {
   --foreground-rgb: 0, 0, 0;