顺风条件字体大小未加载

Question

我的自定义条件顺风字体被添加到输出HTML中，但不做任何事情。

组件:

import { ReactNode } from 'react';
type TextProps = {
variant?: 'h1' | 'h2' | 'body' | 'label' | 'code';
children: ReactNode | string;
className?: string;
} & Omit<JSX.IntrinsicElements['span'], 'className'>;
const Text = ({
variant = 'body',
children,
className,
...rest
}: TextProps) => {
return (
<span
className={`text-${variant} text-secondary-white font-fira ${
className ?? ''
}`}
{...rest}
>
{children}
</span>
);
};
export default Text;

顺风配置:

module.exports = {
mode: 'jit',
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
fontFamily:{
fira:['Fira Code']
},
colors:{
primary:{
black: '#01080E',
darker: '#011221',
dark:'#011627',
medium:'#1C2B3A'
},
secondary:{
main: '#607B96',
mint:'#3C9D93',
purple:'#4D5BCE',
white:'#FFFFFF',
},
accent:{
orange:'#FEA55F',
mint:'#43D9AD',
pink:'#E99287',
purple:'#C988DF'
},
gradient:{
purple:'#4D5BCE',
mint:'#43D9AD'
},
active:{
orange:"#FFAC6B",
main:"#263B50",
},
line:'#1E2D3d',
},
fontSize:{
h1:'62px',
h2:'32px',
body:'18px',
label:'16px',
code:'14px'
},
}
},
plugins: [],
}

这确实正确编译类，如果我直接放入text-h1或text-code，它似乎可以工作。我认为这是字符串插值发生在顺风创建类之后，但我不知道如何修复它。(去掉mode:'jit'没用)

<div class="flex flex-col p-20">
<span class="text-code text-secondary-white font-bla ">Hello world! I am</span>
<span class="text-h1 text-secondary-white font-bla ">Name_Surname
</span><span class="text-h2 text-secondary-white font-bla text-secondary-purple">&gt; Full-stack developer</span>
</div>

Answer 1

顺风在加载到浏览器之前进行预处理，只有使用过的类被绑定到最终的样式文件中。

在你的设置中，tailwind不能识别使用过的类，所以忽略它们。如果您想让它工作，您必须将整个类名存储在variants中。

Answer 2

对于未来的读者，以下是我如何在没有硬编码或使用台湾插件和主题的外部库的情况下克服这个问题的:

// ./tailwind/pluginSafelist.js
const plugin = require("tailwindcss/plugin")
const fs = require("fs")
const path = require("path")
const pluginSafelist = (outputFile = "./tailwind/safelist.txt") =>
plugin(({ theme }) => {
const outputPath = path.join(__dirname, "..", outputFile)
fs.writeFileSync(outputPath, "")
const sizes = Object.keys(theme("fontSize"))
const weights = Object.keys(theme("fontWeight"))
sizes.forEach((size) => fs.appendFileSync(outputPath, `text-${size}n`))
weights.forEach((weight) =>
fs.appendFileSync(outputPath, `font-${weight}n`)
)
})
module.exports = pluginSafelist

// tailwind.config.js
const pluginSafelist = require('./tailwind/pluginSafelist');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
/* content */
"./tailwind/safelist.txt" // it must point to the output txt file
],
theme: {
fontWeight: {
regular: "400",
medium: "500",
bold: "700"
},
fontSize: {
xs: ["0.75rem", { lineHeight: "0.875rem" }],
sm: ["0.875rem", { lineHeight: "1.0625rem" }],
base: ["1rem", { lineHeight: "1.1875rem" }],
lg: ["1.125rem", { lineHeight: "1.375rem" }],
xl: ["1.5rem", { lineHeight: "1.8125rem" }],
"2xl": ["2.25rem", { lineHeight: "2.6875rem" }],
"3xl": ["3rem", { lineHeight: "3.625rem" }],
"4xl": ["4rem", { lineHeight: "4.8125rem" }]
},
},
plugins: [pluginSafelist(/*optional path*/)]
}

txt文件的内容

text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
text-4xl
font-regular
font-medium
font-bold