Laravel Mix (v6.16.0) 忽略 tailwind.config.js (v1.2.0) 设置

Question

我正在使用 laravel/framework v6.16.0、laravel/ui v1.2.0 和 TailwinCSS v1.2.0。对于设置，我使用了 https://sandulat.com/blog/installing-tailwind-into-laravel/ 中的说明。对命名稍作调整后，如

tailwind.js => tailwind.config.js
@tailwind preflight; => @tailwind base;
@import 'tailwind'; => @import 'tailwindcss';

一切正常，TailwindCSS 类生效。我唯一的问题是，我在 tailwind.config.js 中所做的所有更改都被忽略了。文件已重新编译 (npm run watch)，但未采用来自 tailwind.config.js 的更改。没有错误消息或其他指示。

如果我在 tailwind.config.js 中引发语法错误，我会收到一条错误消息。因此我得出结论，该文件已被解析，但正如我提到的那样没有任何效果。

谁能告诉我从哪里开始进行故障排除或者更好地告诉我错误可能出在哪里？

Answer 1

这位 Laracasts 用户的评论： https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming 为我解决了这个问题。

我需要使用 [tailwindcss: configfile] 作为第三个参数来调用 mix.sass。在 .options 中使用相同的方法无效。

Answer 2

好的，安装 https://github.com/laravel-frontend-presets/tailwindcss 解决了我的问题。

Answer 3

这些设置对我在 Laravel 8、Mix 6 和 Tailwind v2 的新项目中有效：

tailwind.config.js

除了添加的清除设置外，此文件未被修改：

module.exports = {
    purge: [
        'resources/views/**/*.blade.php',
        'resources/js/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

webpack.mix.js

除了顺风的导入和附加的顺风设置外，该文件未被修改。注意第二个参数中的额外 {}。

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css', {}, [
        tailwindcss('tailwind.config.js'),
    ])
    .options({
        processCssUrls: false,
    });

app.scss

我现在刚刚添加了所有三个顺风指令。输出量很大，建议进行一些编辑。

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

另一个答案中的 URL 对于使其正常工作至关重要。这一个在这里：https://laracasts.com/discuss/channels/elixir/multiple-tailwind-configs-for-theming

Laravel Mix (v6.16.0) 忽略 tailwind.config.js (v1.2.0) 设置

Laravel Mix (v6.16.0) ignores tailwind.config.js (v1.2.0) settings

laravel

laravel-mix

tailwind-css

laravel-6

laravel-ui