為什么某些 Tailwind 類在 JetStream 中不起作用？

Question

一些類如text-green-500 ， rounded正在生效並且樣式已更新。

其他類，如bg-black ，對樣式沒有任何影響。

我正在使用 Jetstream 和 TailwindCSS。

Answer 1

我以前用這個解決了這個問題：

npm run prod

這可能會幫助你

Answer 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。

ps 由於某種原因，有時 npm run dev 還不夠，我必須去 npm run watch，然后在混合重新編譯結束后 ctrl+c 。 不知道可能是什么原因，但它有所幫助。

Answer 3

如果您添加一些帶有之前未使用的尾風 CSS 元素的 html，則只需運行“npm run dev”，這應該會添加 CSS 類。

之后，您可以使用“php artisan serve”啟動服務器

Answer 4

在您開發 run npm run watch時，它會在您保存頁面時刷新 CSS 要求。

npm run prod適用於您完成開發並希望將站點投入生產的情況。

Answer 5

正如@DaviMendesDev 所建議的，您需要運行 npm 來編譯您的類以供使用。

npm 運行開發

或者

npm 運行產品

這將生成您可以使用的 .css 文件。