代码之家 › 专栏 › 技术社区 › Dong3000

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

laravel-ui tailwind-css laravel-mix laravel-6 laravel

Dong3000 · 技术社区 · 5 年前

我使用的是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中引发语法错误,我会收到一条错误消息。因此,我得出结论,文件已被解析,但正如我提到的,没有任何效果。

有人能告诉我从哪里开始故障排除吗,或者更好地告诉我错误可能在哪里吗?

0 回复 | 直到 5 年前

agm1984 4 年前

这些设置在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

Oláh Tamás 4 年前

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

我需要用[tailwindcss: 配置文件 ]作为第三个参数。在.options中使用相同的选项不起作用。

Dong3000 4 年前

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