update with-turbopack example for postcss/tailwind support (#44261)

vercel · Dec 22, 2022 · 3020c44 · 3020c44
1 parent 0572e21
commit 3020c44
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 21 deletions.
diff --git a/examples/with-turbopack/README.md b/examples/with-turbopack/README.md
@@ -11,21 +11,7 @@ This playground is a mirror of the [Next.js v13 App Directory Playground](https:
 1. Install dependencies: `yarn`
 1. Start the dev server: `yarn dev`
 
-**Note:** The playground uses [Tailwind CSS](https://tailwindcss.com). However, Turbopack does not yet support fully [PostCSS](https://turbo.build/pack/docs/features/css#postcss), but it does support CSS and CSS Modules. [As a workaround](https://turbo.build/pack/docs/features/css#tailwind-css), we run Tailwind through it's CLI upon `postinstall`. For live reload of CSS, you can run Tailwind in another process with the `--watch` flag or install `concurrently` and modify your `dev` script:
-
-```bash
-yarn add concurrently --dev
-```
-
-Then modify your `dev` script in `package.json`:
-
-```json
-{
-  "scripts": {
-    "dev": "concurrently \"next dev --turbo\" \"npm run tailwind --watch\""
-  }
-}
-```
+**Note:** The playground uses [Tailwind CSS](https://tailwindcss.com) via [PostCSS](https://turbo.build/pack/docs/features/css#postcss).
 
 For more information, see: https://turbo.build/pack/docs/features/css#tailwind-css
 

diff --git a/examples/with-turbopack/app/layout.tsx b/examples/with-turbopack/app/layout.tsx
@@ -1,4 +1,4 @@
-import '@/styles/dist.css';
+import '@/styles/globals.css';
 import React from 'react';
 import AddressBar from '@/ui/AddressBar';
 import GlobalNav from './GlobalNav';

diff --git a/examples/with-turbopack/package.json b/examples/with-turbopack/package.json
@@ -2,13 +2,10 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
-    "dev:tailwind": "concurrently \"next dev --turbo\" \"npm run tailwind -- --watch\"",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "tailwind": "tailwindcss -i styles/globals.css -o styles/dist.css",
-    "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
-    "postinstall": "npm run tailwind"
+    "format": "prettier --write \"**/*.{js,ts,tsx,md}\""
   },
   "prettier": {
     "arrowParens": "always",
@@ -18,7 +15,6 @@
   },
   "dependencies": {
     "clsx": "1.2.1",
-    "concurrently": "7.5.0",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/examples/with-turbopack/postcss.config.js b/examples/with-turbopack/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};