turbopack

• https://turbo.build/pack
  • successor to Webpack
• https://areweturboyet.com/

next dev --turbo

• 在 app/layout.tsx import styles/dist.css

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
  swcMinify: true,
  experimental: {
    // Required:
    appDir: true,
  },
};

module.exports = nextConfig;

tailwindcss

src/styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

pnpm tailwindcss -i src/styles/globals.css -o src/styles/dist.css --watch

{
  "scripts": {
    "dev": "concurrently \"next dev --turbo\" \"tailwindcss -i src/styles/globals.css -o src/styles/dist.css --watch\"",
    "build": "tailwindcss -i src/styles/globals.css -o src/styles/dist.css --watch && next build"
  }
}