HTML 上的 Tailwind 类不起作用，而 CSS 文件中的 Tailwind 类起作用答案

【问题标题】：Tailwind classes on HTML don't work while those from the CSS file workHTML 上的 Tailwind 类不起作用，而 CSS 文件中的 Tailwind 类起作用
【发布时间】：2021-06-24 03:08:19
【问题描述】：

因此，如果类按预期工作，则页面应该如下所示：

但是，它看起来像这样：

这是jsx文件中的代码：

                <header
                    className={"p-2 bg-red-500"}
                >
                    <h1>{postData.title}</h1>
                    <p>{postData.date}</p>
                    <img
                        src={formatImgSrc(postData.thumbnail)}
                    />
                </header>
                <div
                    className={"cms-content"}
                    dangerouslySetInnerHTML={
                        { __html: postData.contentHtml }
                    }>
                </div>

这是 /styles/globals.css 中的 css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

.cms-content > p {
    @apply mt-6 bg-red-500;
}

如您所见，我放在 HTML 上的类没有得到应用，而 CSS 文件中的类工作正常。我真的不明白为什么。

这里有更多文件供参考。

next.config.js

module.exports = {
    webpack: (cfg) => {
        cfg.module.rules.push(
            {
                test: /\.md$/,
                loader: 'frontmatter-markdown-loader',
                options: { mode: ['react-component'] }
            }
        )
        return cfg;
    }
}

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/jit": {},
    autoprefixer: {},
  }
}

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

【问题讨论】：

嗨，使用这个配置顺风创建了 output.css 文件。需要在页面中添加该文件，否则您可以使用 cdn unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> 使用尾风
@VikasHarad 我尝试将 cdn 链接添加到 head 中，但仍然无法正常工作，而且我也看不到 output.css 文件。
@juliomalves 是的，我在页面顶部有import '../styles/globals.css'/_app
globals.css 文件与具有@tailwind 指令的文件相同，对吧？
@juliomalves 是的

标签： css next.js tailwind-css

【解决方案1】：

尝试将 .cms-content 类移到 @tailwind 实用程序导入上方。这些导入按顺序进行，您可能会覆盖您的实用程序。请参阅有关创建自己的类的顺风教程：https://youtu.be/TrftauE2Vyk?t=127

【讨论】：

【解决方案2】：

添加您的文件夹：

module.exports = {
  purge: [
   './pages/**/*.{js,ts,jsx,tsx}', 
   './your_folder/**/*.{js,ts,jsx,tsx}',
   './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

【讨论】：

这个页面已经在文件夹pages里面，所以它应该被'./pages/**/*.{js,ts,jsx,tsx}'覆盖