Next.js博客中Tailwind CSS部分样式失效问题求助

原因分析 #

Tailwind CSS的JIT编译模式只会扫描代码中静态写死的className来生成对应的CSS样式。你通过字符串拼接动态生成的<span className="bg-red-600 m-2">，其中的类名无法被Tailwind的扫描器识别，所以不会生成对应的样式规则。

方案一：用JSX直接渲染（推荐） #

放弃dangerouslySetInnerHTML，直接用React的JSX语法渲染标签，这样类名是静态可扫描的，Tailwind就能正常生成样式：

export default async function PostPage({ params }) {
  ...
  // 拆分标签并去除每个标签前后的空格
  const tags = post.data.tags.split(',').map(tag => tag.trim());
  return (
    <>
      <h1 className="text-3xl mt-4 mb-0">{post.data.title}</h1>
      <p>
        {tags.map((tag, index) => (
          <span key={index} className="bg-red-600 m-2">
            {tag}
          </span>
        ))}
      </p>
    </>
  )
}

这种方式还能避免dangerouslySetInnerHTML带来的XSS安全风险。

方案二：将类名加入Tailwind安全列表 #

如果必须使用dangerouslySetInnerHTML（比如处理复杂HTML内容），可以在tailwind.config.js中把用到的类名加入safelist，强制Tailwind编译这些样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  safelist: [
    'bg-red-600',
    'm-2'
    // 后续需要的动态类名都可以加在这里
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

内容的提问来源于stack exchange，提问作者Eagle