Tailwind 无法在 Laravel 中加载我的自定义字体

Question

我想使用自定义字体，例如。 Montserrat，在我基于 Laravel 8 和 VueJS3 等的应用程序中。我尝试了很多在互联网上找到的解决方案，但 none 有效。不管我做什么，我仍然有 Nunito 等作为我的默认字体。当然，当我添加这个

时它起作用了

style="font-family :Monserrat"

到 HTML 但这不是解决方案。

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

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

    theme: {
        customForms: theme => ({
            default: {
                radio: {
                    iconColor: theme('colors.yellow.500'),
                },
            },
        }),
    fontFamily: {
        sans: ['Montserrat'],
        serif: ['Montserrat'],
        mono: ['Montserrat'],
        display: ['Montserrat'],
        body: ['Montserrat']
}
    },
    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },
    darkMode: 'media',
    plugins: [
        require('@tailwindcss/custom-forms'),],
};

webpack.mix.js

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


mix
    .js('resources/js/admin/app.js', 'public/js/admin')
    .js('resources/js/app_mobile.js', 'public/js/')
    .js('resources/js/app.js', 'public/js/').vue()

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

app.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "variables";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

@import "layout";

Answer 1

问题已解决

当前的应用程序代码引用了旧编译的 app.min.css 文件，该文件存在且未被错误删除。

同时，Laravel mix & sass 正在编译一个 app.css 应用程序中根本没有使用的文件。

Tailwind 无法在 Laravel 中加载我的自定义字体

Tailwind can't load my custom font in Laravel

laravel

sass

tailwind-css

laravel-mix

google-fonts