refactor: use actual package

components/TailwindRoot/index.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
-import postcss from 'postcss';
-import prefixer from 'postcss-prefix-selector';
 
-import tailwindcss from '../../vendor/tailwindcss.js';
+import tailwindBundle from '../../utils/tailwind-bundle';
 
 const TailwindRoot = ({ children, flow, source, name }) => {
   const Tag = flow ? 'div' : 'span';
@@ -11,10 +9,9 @@ const TailwindRoot = ({ children, flow, source, name }) => {
 
   React.useEffect(() => {
     const run = async () => {
-      const css = await tailwindcss(source || '');
-      const prefixed = await postcss([prefixer({ prefix: `.${name}` })]).process(css, { from: undefined });
+      const css = await tailwindBundle(source, { prefix: `.${name}` });
 
-      setCss(prefixed.css);
+      setCss(css.css);
     };
 
     run();

docs/tailwind-root-tests.mdx

@@ -1,3 +1,7 @@
 ## Styling Custom Components with Tailwind
 
+```
+<StyledComponent />
+```
+
 <StyledComponent />

package.json

@@ -54,6 +54,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.0",
     "remark-parse": "^11.0.0",
+    "tailwindcss": "^4.0.3",
     "unified": "^11.0.4",
     "unist-util-flatmap": "^1.0.0",
     "unist-util-visit": "^5.0.0",

utils/tailwind-bundle.ts

@@ -1,16 +1,81 @@
-import tailwind from '@tailwindcss/postcss';
 import postcss from 'postcss';
+import prefixer from 'postcss-prefix-selector';
 
-const tailwindBundle = (html: string, config = {}, tailwindConfig = {}) => {
-  const includes = ['@tailwind components;', '@tailwind utilities;'];
+import * as tailwindcss from 'tailwindcss';
 
-  if ('includeBase' in config && config.includeBase) {
-    includes.unshift('@tailwind base;');
+// @ts-ignore
+import index from 'tailwindcss/index.css';
+// @ts-ignore
+import preflight from 'tailwindcss/preflight.css';
+// @ts-ignore
+import theme from 'tailwindcss/theme.css';
+// @ts-ignore
+import utilities from 'tailwindcss/utilities.css';
+
+/*
+ * @note: This is mostly copied from @tailwindcss/browser
+ */
+async function createCompiler() {
+  const css = `
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+`;
+
+  return await tailwindcss.compile(css, {
+    base: '/',
+    loadStylesheet,
+    loadModule,
+  });
+}
+
+async function loadStylesheet(id: string, base: string) {
+  function load() {
+    if (id === 'tailwindcss') {
+      return {
+        base,
+        content: index,
+      };
+    } else if (id === 'tailwindcss/preflight' || id === 'tailwindcss/preflight.css' || id === './preflight.css') {
+      return {
+        base,
+        content: preflight,
+      };
+    } else if (id === 'tailwindcss/theme' || id === 'tailwindcss/theme.css' || id === './theme.css') {
+      return {
+        base,
+        content: theme,
+      };
+    } else if (id === 'tailwindcss/utilities' || id === 'tailwindcss/utilities.css' || id === './utilities.css') {
+      return {
+        base,
+        content: utilities,
+      };
+    }
+
+    throw new Error(`The browser build does not support @import for "${id}"`);
   }
 
-  const plugins = [tailwind({ ...tailwindConfig, content: [{ raw: html, extension: 'html' }] })];
+  try {
+    let sheet = load();
+
+    return sheet;
+  } catch (err) {
+    throw err;
+  }
+}
+
+async function loadModule(): Promise<never> {
+  throw new Error(`The browser build does not support plugins or config files.`);
+}
+
+async function tailwindBundle(string: string, { prefix }: { prefix: string }) {
+  const compiler = await createCompiler();
+  const newClasses = new Set<string>(string.split(/[^a-zA-Z0-9_-]+/));
+  const css = compiler.build(Array.from(newClasses));
 
-  return postcss(plugins).process(includes.join('\n'), { from: undefined });
-};
+  return await postcss([prefixer({ prefix })]).process(css, { from: undefined });
+}
 
 export default tailwindBundle;

webpack.common.js

@@ -39,9 +39,10 @@ module.exports = {
           fullySpecified: false,
         },
       },
-
+      { test: /tailwindcss\/.*\.css$/, type: 'asset/source' },
       {
         test: /\.css$/,
+        exclude: /tailwindcss\/.*\.css$/,
         use: [ExtractCSS.loader, 'css-loader'],
       },
       {
@@ -70,7 +71,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx', '.md'],
+    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx', '.md', '.css'],
     fallback: { buffer: require.resolve('buffer'), util: require.resolve('util/') },
   },
 };

webpack.config.js

@@ -45,7 +45,7 @@ const getConfig = ({ target }) => ({
           fullySpecified: false,
         },
       },
-
+      { test: /tailwindcss\/.*\.css$/, type: 'asset/source' },
       {
         test: /\.css$/,
         use: [ExtractCSS.loader, 'css-loader'],