为啥某些 Tailwind 类在 JetStream 中不起作用？

Posted 2023-03-07

【中文标题】为啥某些 Tailwind 类在 JetStream 中不起作用？

【英文标题】：Why are some Tailwind classes not having effect in JetStream?为什么某些 Tailwind 类在 JetStream 中不起作用？

【发布时间】：2021-09-19 22:55:09

【问题描述】：

text-green-500、rounded 等一些类正在生效并且样式已更新。

其他类，例如 bg-black，对样式没有任何影响。

我正在使用 Jetstream 和 TailwindCSS。

【问题讨论】：

欢迎来到 SO！没有任何背景，您的问题很难回答。也许您可以提供minimal example？可能有很多原因：你重新编译了吗？你的顺风配置是什么样的？你的清洗班可能吗？如果您更新答案，我们可以为您提供更好的帮助！

你有没有用npm run dev来混合你的.css文件修改后？

【参考方案1】：

我以前用这个解决过这个问题：

npm run prod

这可能对你有帮助

【参考方案2】：

有很多可能导致这种情况，但作为一种解决方法，您可以使用 tailwind.config.js 中的安全列表，如下所示：

    purge: 

      content: [
     './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './vendor/laravel/jetstream/**/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
    ],
    safelist: [
        'rounded',
        'text-green-500',
    ],
,

别忘了运行 npm run dev。

附言出于某种原因，有时 npm run dev 还不够，我必须去 npm run watch，然后在混合重新编译结束后按 ctrl+c 。不知道可能是什么原因，但它有所帮助。

【参考方案3】：

正如@DaviMendesDev 所建议的，您需要运行 npm 来编译您的类以供使用。

npm 运行开发

或

npm 运行产品

这将生成您可以使用的 .css 文件。