diff --git a/examples/with-turbopack/README.md b/examples/with-turbopack/README.md index 49db8c8592b112f..6a2079be60bc235 100644 --- 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 index cca20892b157bce..12c58ffcdf778d9 100644 --- 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 index f6e2b9fe5636afc..e92d99091c30f11 100644 --- 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 new file mode 100644 index 000000000000000..12a703d900da815 --- /dev/null +++ b/examples/with-turbopack/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +};