Домашняя страница Tailwind CSS
  1. Настройка
  2. Настройка экранов

Настройка пользовательских экранов

Вы определяете контрольные точки вашего проекта в разделе theme.screens вашего файла tailwind.config.js. Ключи становятся вашими адаптивными модификаторами (например, md:text-center), а значения - это min-width, с которой должна начинаться контрольная точка.

Контрольные точки по умолчанию основаны на общих разрешениях устройств:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

Не стесняйтесь иметь столько экранов, сколько хотите, называя их так, как вы предпочитаете для своего проекта.

Отмена настроек по умолчанию

Чтобы полностью заменить контрольные точки по умолчанию, добавьте свою настраиваемую конфигурацию screens непосредственно под ключом theme:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

Все экраны по умолчанию, которые вы не переопределили (например, xl в приведенном выше примере), будут удалены и не будут доступны в качестве модификаторов экрана.

Переопределение одного экрана

Чтобы переопределить один размер экрана (например, lg), добавьте ваше собственное значение screens под ключом theme.extend:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

Это заменит значение по умолчанию для этой контрольной точки на указанное значение.

Добавление новых контрольных точек

Самый простой способ добавить новую контрольную точку — использовать ключ extend:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

Tailwind автоматически отсортирует ваши контрольные точки, чтобы убедиться, что меньшие контрольные точки вставлены первыми, а большие контрольные точки добавлены в конец.

Использование пользовательских экранных имен

Вы можете называть свои пользовательские экраны как хотите, и не ограничиваться соглашением sm/md/lg/xl/2xl, которое Tailwind использует по умолчанию.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

Ваши адаптивные модификаторы будут отражать эти пользовательские имена экрана, поэтому их использование в HTML теперь будет выглядеть следующим образом:

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>