[devtools] initialize tailwind

Author: devjiwonchoi

packages/next/next-devtools-inject-tailwind.js

@@ -0,0 +1,12 @@
+// This code runs on the browser.
+// The options.target is provided from shadow-portal.tsx file.
+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

@@ -181,6 +181,7 @@
     "@storybook/test-runner": "0.21.0",
     "@swc/core": "1.11.24",
     "@swc/types": "0.1.7",
+    "@tailwindcss/postcss": "4.1.9",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@types/amphtml-validator": "1.0.0",
@@ -250,6 +251,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 +294,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 +329,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,13 @@ 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.
+      // The target is passed to the next-devtools-inject-tailwind.js file which runs on the browser.
+      // 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';