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

Вы определяете контрольные точки вашего проекта в разделе theme.screens вашего файла tailwind.config.js. Ключи становятся вашими адаптивными модификаторами (например, 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) { ... }
    }
  }
}

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

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

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

tailwind.config.js
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
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '992px',
        // => @media (min-width: 992px) { ... }
      },
    },
  },
}

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

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

Самый простой способ добавить дополнительную контрольную точку большего размера - использовать ключ 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: [],
}

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

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

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

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) { ... }
    },
  }
}

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

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

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

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

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

Если вы хотите работать с контрольными точками максимальной ширины вместо минимальной ширины, вы можете указать свои экраны как объекты с помощью ключа 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, используйте вместе клчюи min и max:

tailwind.config.js
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>

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

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

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

tailwind.config.js
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:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

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