[devtools] initialize tailwind

Author: devjiwonchoi

.prettierignore

@@ -15,6 +15,7 @@ packages/next/src/bundles/webpack/packages/*.runtime.js
 packages/next/src/bundles/webpack/packages/lazy-compilation-*.js
 packages/next/wasm/@next
 packages/next/errors.json
+packages/next/**/tailwind.output.css
 
 .github/actions/next-stats-action/.work
 .changeset/*.md

packages/next/package.json

@@ -89,7 +89,9 @@
     "ncc-compiled": "taskr ncc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "build-tw": "tailwindcss --input ./src/client/components/react-dev-overlay/ui/styles/tailwind.input.css --output ./src/client/components/react-dev-overlay/ui/styles/tailwind.output.css --minify",
+    "watch-tw": "pnpm build-tw --watch"
   },
   "taskr": {
     "requires": [
@@ -181,6 +183,7 @@
     "@storybook/test-runner": "0.21.0",
     "@swc/core": "1.11.24",
     "@swc/types": "0.1.7",
+    "@tailwindcss/cli": "4.1.8",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@types/amphtml-validator": "1.0.0",
@@ -327,6 +330,7 @@
     "string_decoder": "1.3.0",
     "strip-ansi": "6.0.0",
     "superstruct": "1.0.3",
+    "tailwindcss": "4.1.8",
     "tar": "6.1.15",
     "taskr": "1.1.0",
     "terser": "5.27.0",

packages/next/src/client/components/react-dev-overlay/ui/dev-overlay.tsx

@@ -11,6 +11,7 @@ import { RenderError } from './container/runtime-error/render-error'
 import { DarkTheme } from './styles/dark-theme'
 import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
 import type { HydrationErrorState } from '../pages/hydration-error-state'
+import { Tailwind } from './styles/tailwind'
 
 export function DevOverlay({
   state,
@@ -29,6 +30,7 @@ export function DevOverlay({
       <Colors />
       <ComponentStyles />
       <DarkTheme />
+      <Tailwind />
 
       <RenderError state={state} isAppDir={true}>
         {({ runtimeErrors, totalErrorCount }) => {

packages/next/src/client/components/react-dev-overlay/ui/styles/tailwind.gen.tsx

@@ -0,0 +1 @@
+@import 'tailwindcss';

packages/next/src/client/components/react-dev-overlay/ui/styles/tailwind.input.css

@@ -0,0 +1 @@
+export { Tailwind } from './tailwind.gen'

packages/next/src/client/components/react-dev-overlay/ui/styles/tailwind.output.css

@@ -2829,7 +2829,13 @@ export async function diagnostics(task, opts) {
 
 export async function build(task, opts) {
   await task.serial(
-    ['precompile', 'compile', 'check_error_codes', 'generate_types'],
+    [
+      'inject_tailwind_styles',
+      'precompile',
+      'compile',
+      'check_error_codes',
+      'generate_types',
+    ],
     opts
   )
 }
@@ -2871,6 +2877,39 @@ export async function check_error_codes(task, opts) {
   }
 }
 
+export async function inject_tailwind_styles() {
+  // Generate the production build of tailwind css file.
+  await execa.command('pnpm build-tw', {
+    stdio: 'inherit',
+  })
+
+  const stylesDir = 'src/client/components/react-dev-overlay/ui/styles'
+
+  const css = await fs.readFile(
+    join(__dirname, stylesDir, 'tailwind.output.css'),
+    'utf8'
+  )
+
+  // Escape `export` keyword because `export function` is pre-processed
+  // as `exports.function` when taskfile.js is being transformed.
+  const exportKeyword = 'export'
+  const source = `// This file is generated by taskfile.js "inject_tailwind_styles" task.
+${exportKeyword} function Tailwind() {
+  return (
+    <style>
+      {${JSON.stringify(css)}}
+    </style>
+  )
+}
+`
+
+  await fs.writeFile(
+    join(__dirname, stylesDir, 'tailwind.gen.tsx'),
+    source,
+    'utf-8'
+  )
+}
+
 export default async function (task) {
   const opts = { dev: true }
   await task.clear('dist')