我有一个next.js应用程序,我看到模板文字中的内容并不经常呈现。在谷歌搜索最有可能有一个解决方案,只是不愿意花这么多时间来研究它。
import { displayMediaQueries } from '@/constants'
export const displayMediaQueries =
'w-[1200px] xl:w-[1000px] lg:w-[800px] md:w-[600px] sm:w-[400px] xs:w-full'
<div className={`${displayMediaQueries} my-0 mx-auto h-[50px]`}>
<Navbar />
</div>
字符串
我看到代码是正确的,它的工作,并在一些刷新后,它只是打破自己。我是否使用了一些不好的做法,以便它发生?没有太多的经验与下一个,它通常是错误的?有趣的是,如果我在使用模板文字的地方写上w-[1200 px],然后刷新网站,然后从模板文字中删除w-[1200 px],它会自动修复?
提前感谢!
我试着重新启动服务器,看看我的代码是否有问题-显然一切似乎都很好,并搜索谷歌的确切问题,它得到临时修复后,我手动编写并删除它。
1条答案
按热度按时间laik7k3q1#
问题肯定不在
Next.js
,而是在tailwind
。由于它预先生成了必要的样式,因此动态添加它们可能会有问题。
tailwind
的主要优点是,您可以预先定义设计系统的所有值,并在所有地方使用它们。这样你就可以得到少量的风格。所有其他的样式在你的bundle中都将丢失,所以这就是为什么你有时看不到结果--这些类名没有包含在你的bundle中。方括号的使用是一个例外,在一些罕见的情况下,你不想把主题配置。对于每个值使用这些括号,这与使用普通
CSS
的书写样式基本相同。Tailwind
基本上是一个ui系统,所以使用它或设置您自己的值。对于动态或条件样式,可以使用
clsx
或classnames
库,这非常方便