如何在 Tailwind 中添加 roboto 字体系列？

Question

如何在 tailwind 中添加 roboto 字体系列并将其用于标签元素？

<label class="font-roboto"></label>

Answer 1

这与 Tailwind 没有太大关系。只需从 Google 字体导入字体，并在整个应用程序中使用它。例如：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');

html, body, label {
  font-family: 'Roboto', sans-serif;
}

Answer 2

可以在main.css中导入字体，通过tailwind.config.js

添加

 module.exports = {
  theme: {
    fontFamily: {
      'sans': [your_main_font],
      'roboto': ['Roboto', 'sans-serif'],
    }
  }
}

您可以在文档中看到如何在 tailwind css 字体中添加 google，

https://tailwindcss.com/docs/font-family#customizing-your-theme

如何在 Tailwind 中添加 roboto 字体系列？

How to add roboto font family in tailwind?

tailwind-css

tailwind-ui

tailwind-3