Laravel 混合 - class 来自变量未构建

Question

我的 class 从变量不工作，我确定它的混合问题。

<div class="rounded bg-gradient-to-r {{$replay->playerOneTeam()}}">
    Team: {{ $replay->playerOneTeam()}}
</div>

似乎 purgeCSS 或其他东西正在删除 class "from-red-400"。当我手动设置它并执行 npm run dev 时它可以工作，但是当它从变量中使用时，它不会加载。 class 在我检查时在代码中，但代码运行起来就像它不存在一样。

Answer 1

检查您的 tailwind.config.js 文件并查找类似这样的内容：

module.exports = {
    mode: 'jit',
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],
    // ...
}

在此示例中，启用了 JIT 模式，purge 是您可以指定要查找使用的 Tailwind CSS 类的文件的位置。从这里，您有三个选择：

[不推荐]禁用 JIT 模式。
遵循指南 here to make sure the compiler sees your class name in those files you specified, i.e. to write purgeable HTML code in those files。
将 purge 分成 content 和 safelist 这样编译器就不会不小心删除那里指定的类（这将是类 没有明确出现在purgeable HTML code).

使用上面的例子，第三个选项看起来像这样：

module.exports = {
    mode: 'jit',
    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',
            './resources/js/**/*.vue',
        ],
        safelist: [
            'from-red-400', // this is the class you wanted

            // ... some other classes you may need

            'bg-blue-500', // example class
            'text-center', // example class
            'hover:opacity-100', // example class
        ]
    },
    // ...
}

Laravel 混合 - class 来自变量未构建

Laravel mix - class from variable isnt builded

laravel

laravel-mix