Блог

Главная - Вопросы по программированию - Отключить точку останова 2xl для класса контейнера

Отключить точку останова 2xl для класса контейнера

#nuxt.js #tailwind-css

#nuxt.js #попутный ветер-css

Вопрос:

Для Tailwind 2.0.1 установлена точка 2xl останова 1536px . Я хотел бы отключить эту точку останова и установить максимальную container ширину для точки xl останова. Согласно документам, я могу отключить все адаптивные варианты для container , но я просто хочу отключить эту единственную точку останова. Вместо этого я попытался отключить точку 2xl останова, обновив конфигурацию Tailwind следующим образом:

 module.exports = {
  theme: {
    screens: {
      '2xl': '1280px'
    }
  }
}

Это не работает, и я не думаю, что это было бы правильно, когда я хочу настроить таргетинг только на один класс и одну точку останова.

Ответ №1:

Если вы просто удаляете эту точку останова для класса контейнера, вы хотите указать точки останова, которые хотите сохранить в theme.container.screens ключе.

 module.exports = {
    theme: {
        container: {
            screens: {
                'sm': '640px',
                'md': '768px',
                'lg': '1024px',
                'xl': '1280px',
            }
        }
    }
}

Или, если вы используете те же точки останова, что и основная тема, и вы бы предпочли не указывать те же точки останова снова, вы можете получить их, используя тему по умолчанию.

 const defaultTheme = require('tailwindcss/defaultTheme')

let containerScreens = Object.assign({}, defaultTheme.screens)

// Delete the 2xl breakpoint from the object
delete containerScreens['2xl']

module.exports = {
    theme: {
        container: {
            screens: containerScreens
        }
    }
},

Вот она в приложении Tailwind Play в качестве рабочего примера: https://play.tailwindcss.com/0ErQ9yGQvs?size=2142x720amp;file=config

Метки: