尾风＆＃x2B; NextJS使用_document＆lt; Body className在全球范围内设置线路高点。
我有一个nextJ，正在使用parwindcss。我想为整个项目设置一些默认样式。最初，我通过将我的_app.tsx用DIV包装，并使用tailwind将其定型。现在，我正在使用_document.tsx并正在设计标签。
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,500;1,700&display=swap"
rel="stylesheet"
/>
</Head>
<body className="bg-slate-900 text-lg leading-3 text-white">
<Main />
<NextScript />
</body>
</Html>
)
}
我能够通过这种方法成功地更改背景颜色和字体颜色。但是，当我尝试设置这样的线路高度时，它行不通。 我的问题是：
- 这是用尾风设计nextJS应用程序的常见方法，还是有一些我不知道的常见方法？
- 为什么我不能使用此方法设置线高？
I have a nextjs and am using tailwindcss. I would like to set some default styles for the entire project. Originally I did this by wrapping my _app.tsx with a div and styled this div using tailwind. Now I am using the _document.tsx and am styling the tag.
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,500;1,700&display=swap"
rel="stylesheet"
/>
</Head>
<body className="bg-slate-900 text-lg leading-3 text-white">
<Main />
<NextScript />
</body>
</Html>
)
}
I was able to succesfully change background colour and font colour with this method. However when I try to set the line-height like this it does not work.
My questions are:
- Is this a common way to style a nextjs app with tailwind or is there some commonly accepted way to do this that I don't know about?
- Why is can I not set the line height with this method?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如 tailwind css文档 - 超级拖放默认线，
字体大小类已默认实现了不同的行高。如果不设置特定于断点的线路高度，您就无法覆盖它。您还可以自定义您的font-size 您的font-size类而无需添加任何初始线 - 高度属性，以便您可以添加不同的行高度类。例子：
As mentioned in the Tailwind CSS document - Overriding default line-heights, the
Font Sizeclasses have implemented differentline heightby default. You cannot override it without setting a breakpoint-specific line-height. You can also customize your font-size classes without adding any initial line-height property so that you can add different line-height classes.Example:
解决您的问题
是的，尾风本身提供了有关将tailwind与nextjs集成的信息在这里。
line-height是一种可继承的属性，这意味着如果您将其设置在某个地方，则所有子元素都将继承该值（就像font，一样，几乎就像其他属性一样颜色等。
还有其他覆盖其值的东西（例如，您正在使用的UI库不同）。
它已应用，但其工作方式与您预期的不同。您在示例中使用的值使用
rem作为单元。这将转化为固定值。在您的情况下，领先3等于12px，在您的页面上肯定看起来很差。您应该将其更改为相对单位（领先，领导范围，领先的，领导normal代码>，领先 - 重新删除和领先的）使该line-height与font-size相关代码>文本的值。然后它将按照您的期望工作。为了找到原因，您可以在Google Chrome的Dev-Tools（或其他浏览器中的任何其他类似工具）中使用样式面板。
请确保您在“显示”上激活以查看继承的属性。扩展属性后，您将看到级联（所有试图应用于元素的值），并且属于具有最高特异性的选择器的值将获胜。
To address your questions
Yes, Tailwind itself provide information about integrating Tailwind with Nextjs here.
line-heightis an inheritable property meaning that if you set it somewhere, all the child elements will inherit that value (pretty much like some other properties likefont,color... etc.)Now to answer your question about why it isn't applied, there are two possible scenarios.
There is something else overriding its value (like if there is a different UI library you're using).
It's applied but it works in a different way than you expect. The value you are using in the example uses the
remas the unit. This will translate to a fixed value. In your case,leading-3is equal to12pxwhich will definitely look very poor on your page. You should change that to the relative units (leading-none,leading-tight,leading-snug,leading-normal,leading-relaxed, andleading-loose) to make thatline-heightrelevant to thefont-sizevalue of your text. Then it will work as you expect.To find the cause, you can use the Styles panel in Google Chrome's dev-tools (or any other similar tools in other browsers).
Make sure you activate on "Show all" to see the inherited properties. Upon expanding the property, you will see the cascade (all the values trying to be applied to the element) and the value that belongs to the selector with the highest specificity will win.