tailwindcss-填充和保证金不在响应式断点上工作
我正在使用NUXTJ上的Tailwind CSS进行响应式设计。
这里有人知道为什么PY-8都适用于两个断点吗？
这就是我编写
<template>
<div class="bg-[#EEEEEE] py-8 lg:py-20">
<p class="text-3xl lg:text-5xl text-center mb-0">Partners</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
我正在谷歌搜索和堆叠的组件的方式，但是问题的答案是指使用tailwind.config.js上的variants属性的旧版本的tailwind CSS。
I am working on a responsive design using Tailwind CSS on nuxtjs.
Anyone here knows why py-8 is applying to both breakpoints?
This is how I am writing the component
<template>
<div class="bg-[#EEEEEE] py-8 lg:py-20">
<p class="text-3xl lg:text-5xl text-center mb-0">Partners</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
I am googling and stackoverflowing but the problem answers refers to old version of tailwind css using variants property on tailwind.config.js
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
好吧，在面对这个问题大约两个月后，我终于发现Vuetify和Tailwind CSS遇到一些问题，如果您遇到同样的问题并且实际上使用Vuetify + Tailwind CSS考虑使用前缀用于尾翼类
https://tailwindcss.com/docs/configuration#prefix
Well after facing this problem for about 2 months I finally find out that vuetify and tailwind css have some problems working together, if you are facing same problem and actually are using vuetify + tailwind css consider using prefix for tailwind classes
https://tailwindcss.com/docs/configuration#prefix
根据parwindcss的官方文件。
lg的断点是1024px代码工作正常。
由于背景接近白色，您无法弄清楚这些更改。
为了确保它正在使用黑色背景一次。并更改您想要的颜色。
代码：
输出：
屏幕尺寸少
lg断点对于屏幕尺寸大于
lg断点According the tailwindcss official documentation.
Breakpoint of
lgis1024pxThe code is working just fine.
As the background is near to white you are not able to figure out the changes.
To ensure it is working try with the black background once . And change to the color you want .
The code:
The output:
For screen size less the
lgbreakpointFor the screen size greater than
lgbreakpoint