如何基于HTML字符串构建TailwindCSS（无需使用npx或CLI工具）

看起来你遇到的问题是因为Tailwind CSS v4的API和v3有很大差异，你当前的写法还是沿用了v3的配置逻辑，所以才只返回了默认的Tailwind注释，没有生成对应HTML的样式。我来帮你调整代码，实现纯JS/TS环境下的需求：

第一步：确认依赖安装 #

先确保你装对了最新版的依赖：

npm install postcss tailwindcss@latest

第二步：修正后的构建函数 #

这是适配v4 API的完整代码，完全不需要CLI工具：

import postcss from 'postcss';
import tailwindcss from '@tailwindcss/postcss';

export async function buildTailwind(content, customCss = '') {
  // 拼接基础Tailwind指令和自定义CSS
  const inputCSS = `
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    ${customCss}
  `;

  // 用PostCSS处理，注意v4中content的写法变化
  const result = await postcss([
    tailwindcss({
      content: [content], // v4直接传入HTML字符串数组，不需要raw/extension结构
    }),
  ]).process(inputCSS, { from: undefined });

  return result.css;
}

// 测试使用
(async () => {
  const testHtml = '<p class="text-red-500">Hello, World!</p>';
  const css = await buildTailwind(testHtml);
  console.log(css);
})();

为什么之前的代码不生效？ #

你之前写的content: [{ raw: content, extension: 'html' }]是Tailwind v3的配置格式，但v4大幅简化了内容源的传入方式——直接传HTML字符串（或多个字符串组成的数组）就可以了，不需要额外的对象包装。

扩展功能：添加自定义配置 #

如果需要自定义主题、插件等，直接在Tailwind配置对象里扩展就行，比如：

tailwindcss({
  content: [content],
  theme: {
    extend: {
      colors: {
        'my-brand': '#2563eb',
      },
    },
  },
})

现在运行这个函数，你就能得到包含text-red-500对应红色样式的完整CSS代码，而不是只有默认注释的输出啦。

内容来源于stack exchange