1

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

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

4

3 回答 3

1

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

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

于 2020-05-20T09:27:00.943 回答
1

这些设置适用于我在 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,
    });

应用程序.scss

我现在刚刚添加了所有三个顺风指令。输出非常大，因此可能建议进行一些编辑。

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

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

于 2021-01-10T23:11:54.707 回答
0

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

于 2020-06-04T15:22:28.200 回答