Настройка экранов

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

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

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

/** @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:

/** @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:

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

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

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

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

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

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

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

Если вы хотите добавить дополнительную небольшую контрольную точку, вы не можете использовать extend , потому что маленькая контрольная точка будет добавлена в конец списка контрольных точек, а контрольные точки должны быть отсортированы от наименьшего к наибольшему, чтобы работать должным образом с система контрольных точек минимальной ширины.

Вместо этого переопределите ключ screens, повторно указав контрольные точки по умолчанию:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

Мы предоставляем тему по умолчанию в tailwindcss/defaultTheme, поэтому вам не нужно самостоятельно поддерживать список контрольных точек по умолчанию.

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

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

/** @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>

​Расширенная конфигурация

По умолчанию контрольные точки имеют минимальную ширину, чтобы стимулировать рабочий процесс mobile-first. Если вам нужен больший контроль над вашими медиа-запросами, вы также можете определить их с помощью синтаксиса объекта, который позволяет указать явные значения минимальной и максимальной ширины.

​Контрольные точки максимальной ширины

Если вы хотите работать с контрольными точками максимальной ширины вместо минимальной ширины, вы можете указать свои экраны как объекты с помощью ключа max:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

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

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

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

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

Обязательно укажите контрольные точки максимальной ширины в порядке убывания, чтобы они переопределяли друг друга, как и ожидалось.

​Контрольные точки с фиксированным диапазоном

Если вы хотите, чтобы в ваших контрольных точках указывались как min-width, так и max-width, используйте вместе клчюи min и max:

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

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

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

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

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

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

<div class="md:text-center">
  Этот текст будет центрирован на средних экранах, но вернется к значениям
  по умолчанию (выравнивание по левому краю) для всех других размеров экрана.
</div>

​Контрольные точки с несколькими диапазонами

Иногда может быть полезно применить одно определение контрольной точки в нескольких диапазонах.

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

​Пользовательские медиа-запросы

Если вам нужен полный контроль над сгенерированным медиа-запросом, используйте ключ raw:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

Медиа-запросы, определенные с помощью ключа raw, будут выводиться как есть, а ключи min и max будут проигнорированы.