Tailwind css 优先级

Question

我在为不同屏幕设置 div 宽度时遇到问题。我在 tailwind.css

中创建了一个 class .vBox

.vBox{
    width: 360px;
    min-height : 200px;
}

并在div

中使用

<div className="h-48 md:vBox w-full">

但是根据 w-full，对于所有媒体屏幕，宽度总是满的。我什至试过

<div className="h-48 w-full md:vBox">

但结果相同。如果我删除 w-full，则宽度根据 vBox 但我想要 w-full class 移动屏幕中的宽度。

Answer 1

如果您想为每个空间设备设置不同的空间宽度，您可以通过使用 @media() css 函数获取设备的屏幕宽度来实现。我在 https://play.tailwindcss.com/gEgbhOvzH8?size=514x720&file=css 中为你做了一个例子或者您可以查看下面显示的代码片段

    .vBox{
    min-height : 200px;
    background: red;
}
@media (min-width:480px) {
    .vBox { width: 400px }
}
@media (min-width:640px) {
    .vBox { width: 600px }
}
@media (min-width:768px) {
    .vBox { width: 700px }
}
@media (min-width:1024px) {
    .vBox { width: 1000px }
}
@media (min-width:1280px) {
    .vBox { width: 1200px }
}
@media (min-width:1536px) {
    .vBox { width: 1500px }
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="h-48 vBox w-full">

Answer 2

要使您的自定义 .vBox class 响应，您可以按如下方式定义它：

@variants responsive {
    .vBox {
        width: 360px;
        min-height : 200px;
    }
}

这将允许您的 class 被断点前缀选中，例如您示例中的 md:vBox。

查看 generate responsive variants 文档了解更多详细信息。

Tailwind css 优先级

Tailwind css precendence

css

media-queries

tailwind-css