Tailwind css laravel 混合添加字体

Question

我正在尝试将 tailwndo css 用于 laravel 中的一个项目，我想为整个应用程序保留 nunito 字体，但 Tailwind 有自己的字体集。有人知道怎么改吗？

Answer 1

将字体连接到项目（像往常一样），然后将您的字体添加到 tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
     'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
     'serif': ['Georgia', 'Cambria', ...],
     'mono': ['SFMono-Regular', 'Menlo', ...],
     'your-font': ['Your Font', ...]
    }
  }
}

https://tailwindcss.com/docs/font-family/#app

Answer 2

tailwind.config.js :

theme: {
    extend: {
        fontFamily: {
            body: ['Rowdies']
        }
    }
  },

css\app.css

@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');

shell:

npm run dev
or 
npm run watch

现在您可以在任何您想要的标签中使用 .font-body class 例如：

<body class="font-body">
  <h1>Hello World!</h1>
</body>

字体 + 正文 = 字体正文

fontFamily: {
            body: ['Open Sans']
        }

(可以换body)

Tailwind css laravel 混合添加字体

Tailwind css laravel mix add fonts

laravel

laravel-mix

tailwind-css