[英]Custom Font Family not working in Tailwind theme configuration
I have customized the default theme for my project.我已经为我的项目自定义了默认主题。 Here is the theme section of my
tailwind.config.js
file:这是我的
tailwind.config.js
文件的主题部分:
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
tablet: "768px",
// => @media (min-width: 768px) and (max-width: 1023px) { ... }
desktop: "1024px",
// => @media (min-width: 1024px) { ... }
},
fontFamily: {
Inter: ["Inter"],
'"Work Sans"': ['"Work Sans"'],
'"Open Sans"': ['"Open Sans"'],
Montserrat: ["Montserrat"],
},
backgroundColor: () => ({
primary: "#0C1F4F",
secondary: "#1fc69a",
}),
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
The problem is fontFamily
that contains a space ie Work Sans
does not working while Inter
is working.问题是
fontFamily
包含一个空格,即在Inter
工作时Work Sans
不工作。 I have followed the documentation .我遵循了文档。
Note that Tailwind does not automatically escape font names for you.
请注意,Tailwind 不会自动为您转义字体名称。 If you're using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
如果您使用的字体包含无效标识符,请将其括在引号中或转义无效字符。
{
// Won't work:
'sans': ['Exo 2', ...],
// Add quotes:
'sans': ['"Exo 2"', ...],
// ...or escape the space:
'sans': ['Exo\\ 2', ...],
}
But seems that not working.但似乎不起作用。
<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-Work Sans text-xl">
Get a quote
</button>
The reason is I'm using space between words, as a result not changing font.原因是我在单词之间使用了空格,因此没有改变字体。 So, by using camelCase or
word-word
will be fixed.因此,通过使用camelCase或
word-word
将被修复。
Here is the code:这是代码:
fontFamily: {
inter: "Inter",
workSans: "Work Sans",
openSans: "Open Sans",
Montserrat: "Montserrat",
}
<button className="w-40 h-12 bg-secondary rounded-lg font-semibold font-workSans text-xl">
Get a quote
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.