Back to Details

tailwind-turbopack

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS + Turbopack

Tailwind CSS + Turbopack

Avoid Inline Styles

避免使用内联样式

Never use inline 
style={}
props. Always use Tailwind classes or CSS in stylesheets.
For dynamic values that can't be expressed as Tailwind classes, define CSS classes with data attributes in a stylesheet:
css
/* In stylesheet */
.collapsible[data-expanded="false"] {
	grid-template-rows: 0fr;
}
.collapsible[data-expanded="true"] {
	grid-template-rows: 1fr;
}
jsx
/* In component */
<div className="collapsible" data-expanded={isExpanded}>
切勿使用内联
style={}
属性。请始终使用Tailwind类或样式表中的CSS。
对于无法用Tailwind类表示的动态值，请在样式表中使用data属性定义CSS类：
css
/* In stylesheet */
.collapsible[data-expanded="false"] {
	grid-template-rows: 0fr;
}
.collapsible[data-expanded="true"] {
	grid-template-rows: 1fr;
}
jsx
/* In component */
<div className="collapsible" data-expanded={isExpanded}>

Known Issue

已知问题

Turbopack may fail to generate CSS for some Tailwind utility classes (especially arbitrary values in responsive variants like 
max-md:grid-rows-[0fr]
). Classes appear in HTML but the CSS rules are missing from the bundle.
Workaround: Use Webpack for development or define complex styles in CSS files:
bash
pnpm dev:webpack
Turbopack可能无法为部分Tailwind工具类生成CSS（尤其是响应式变体中的任意值，例如
max-md:grid-rows-[0fr]
）。类会出现在HTML中，但对应的CSS规则未包含在打包文件中。
解决方法： 在开发环境中使用Webpack，或在CSS文件中定义复杂样式：
bash
pnpm dev:webpack