Прецендентность css Tailwind

#css #media-queries #tailwind-css

#css #медиа-запросы #tailwind-css

Вопрос:

Я столкнулся с проблемой настройки ширины div для разных экранов. Я создал class .VBox в tailwind.css

 .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 на мобильных экранах.

1. имя класса «h-48 md: VBox w-full» и «h-48 w-full md: VBox» таким же образом. поэтому вам нужно подумать о добавлении нового класса, определенного в tailwind css, который работает в адаптивном режиме. одна вещь, которую вы не должны определять пространственную ширину для div, чтобы получить полную ширину с помощью responsive. полная ширина div никогда не будет работать, если вы определите для нее какую-либо отдельную ширину, например 360px.

2. @BozlurRahman итак, как сделать VBox отзывчивым? в настоящее время он занимает всю ширину для всех экранов

3. Вы сделали .vBox это как утилиту или просто добавили .vBox в свой css-лист?

Ответ №1:

Чтобы сделать ваш пользовательский .vBox класс адаптивным, вы можете определить его следующим образом:

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

Это позволит вашему классу получать префиксы точек останова, как md:vBox в вашем примере.

Для получения более подробной информации ознакомьтесь с документацией по созданию адаптивных вариантов.

Ответ №2:

Если вы хотите задать различную ширину пространства для каждого устройства с пространством, вы можете сделать это, выбрав ширину экрана устройства с помощью @media() функции css. я привел для вас пример в https://play.tailwindcss.com/gEgbhOvzH8?size=514x720amp;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">

Развернуть фрагмент