Контрольные точки

Базовая кастомизация

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

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

// tailwind.config.js
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) { ... }
    }
  }
}

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

Например, вы можете использовать имена устройств вместо размеров:

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

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

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

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

.text-center { text-align: center }

@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}

@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}

@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}

Расширение контрольных точек по умолчанию

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

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

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

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

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

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

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

// tailwind.config.js
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, если необходимо, например:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

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

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

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

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Боковая панель отображается с размером 768 пикселей,
        // поэтому вернитесь к стилям `sm:` от 768 до 868 пикселей,
        // после чего основная область содержимого снова станет достаточно широкой для применения стилей `md:`.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

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

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

Стиль для печати

Параметр raw может быть особенно полезен, если вам нужно применить разные стили специально для печати.

Все, что вам нужно сделать, это добавить экран print в theme.extend.screens:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

Затем вы можете использовать такие классы, как print:text-black, чтобы указать стили, которые должны применяться только тогда, когда кто-то пытается распечатать страницу, над которой вы работаете:

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>