[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/next-devtools-inject-tailwind.js

@@ -0,0 +1,10 @@
+function insertIntoTarget(element, options) {
+  var root =
+    options.target ||
+    document.querySelector('script[data-nextjs-dev-overlay] > nextjs-portal')
+      .shadowRoot
+
+  root.insertBefore(element, root.firstChild)
+}
+
+module.exports = insertIntoTarget

packages/next/next-devtools.webpack-config.js

@@ -88,6 +88,21 @@ module.exports = ({ dev, ...rest }) => {
     module: {
       rules: [
         { test: /\.m?js$/, loader: `source-map-loader`, enforce: `pre` },
+        // TODO: minify
+        {
+          test: /tailwind\.css$/,
+          use: [
+            {
+              loader: 'style-loader',
+              options: {
+                injectType: 'lazyStyleTag',
+                insert: require.resolve('./next-devtools-inject-tailwind.js'),
+              },
+            },
+            'css-loader',
+            'postcss-loader',
+          ],
+        },
         {
           test: /\.(ts|tsx)$/,
           exclude: [/node_modules/],

packages/next/package.json

@@ -89,7 +89,9 @@
     "ncc-compiled": "taskr ncc",
     "storybook": "BROWSER=none storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "tw-build": "tailwindcss --input ./src/next-devtools/dev-overlay/tailwind.input.css --output ./src/next-devtools/dev-overlay/styles/tailwind.output.css",
+    "tw-watch": "pnpm tw-build --watch=always"
   },
   "taskr": {
     "requires": [
@@ -181,6 +183,8 @@
     "@storybook/test-runner": "0.21.0",
     "@swc/core": "1.11.24",
     "@swc/types": "0.1.7",
+    "@tailwindcss/cli": "4.1.8",
+    "@tailwindcss/postcss": "4.1.9",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@types/amphtml-validator": "1.0.0",
@@ -250,6 +254,7 @@
     "cross-env": "6.0.3",
     "cross-spawn": "7.0.3",
     "crypto-browserify": "3.12.0",
+    "css-loader": "7.1.2",
     "css.escape": "1.5.1",
     "cssnano-preset-default": "7.0.6",
     "data-uri-to-buffer": "3.0.1",
@@ -292,6 +297,7 @@
     "path-to-regexp": "6.1.0",
     "picomatch": "4.0.1",
     "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-loader": "8.1.1",
     "postcss-modules-extract-imports": "3.0.0",
     "postcss-modules-local-by-default": "4.2.0",
     "postcss-modules-scope": "3.0.0",
@@ -326,7 +332,9 @@
     "string-hash": "1.1.3",
     "string_decoder": "1.3.0",
     "strip-ansi": "6.0.0",
+    "style-loader": "4.0.0",
     "superstruct": "1.0.3",
+    "tailwindcss": "4.1.8",
     "tar": "6.1.15",
     "taskr": "1.1.0",
     "terser": "5.27.0",

packages/next/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

packages/next/src/compiled/babel-packages/packages-bundle.js

@@ -2,6 +2,9 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { STORAGE_KEY_THEME } from '../shared'
 
+// @ts-expect-error - CSS file missing type declaration
+import tailwindCss from '../tailwind.css'
+
 export function ShadowPortal({ children }: { children: React.ReactNode }) {
   let portalNode = React.useRef<HTMLElement | null>(null)
   let shadowNode = React.useRef<ShadowRoot | null>(null)
@@ -33,6 +36,12 @@ export function ShadowPortal({ children }: { children: React.ReactNode }) {
     // createa React Root in getInitialProps but don't clean it up like test/integration/app-tree/pages/_app.tsx
     if (portalNode.current.shadowRoot === null) {
       shadowNode.current = portalNode.current.attachShadow({ mode: 'open' })
+
+      // Injecting Tailwind to the Shadow DOM with Webpack style-loader.
+      // x-ref: https://webpack.js.org/loaders/style-loader/#lazystyletag
+      tailwindCss.use({
+        target: shadowNode.current,
+      })
     }
     forceUpdate({})
   }, [])

packages/next/src/compiled/postcss-preset-env/index.cjs

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

packages/next/src/next-devtools/dev-overlay/components/shadow-portal.tsx

@@ -43,6 +43,11 @@ declare module '*.module.scss' {
   export default classes
 }
 
+declare module '*.css?raw' {
+  const content: string
+  export default content
+}
+
 // We implement the behavior of `import 'server-only'` and `import 'client-only'` on the compiler level
 // and thus don't require having them installed as dependencies.
 // By default it works fine with typescript, because (surprisingly) TSC *doesn't check side-effecting imports*.