Шпаргалка по Layout
Схлопывание margin: Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 50px , а второго 30px , то отступ между ними будет 50px
Выпадение margin: Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмётся к верхнему краю родительского, а у родительского элемента появится отступ сверху. То есть верхний отступ внутреннего элемента «выпадает» из родительского элемента. Будет выбран максимальный margin
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху
Как отцентровать элемент?
- Задать width
- Задать margin: 0 auto
Проблема width 100%
CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа. Ширина 100% заставит поля быть такой же ширины, как родительский блок, а паддинг добавит отступы. За счёт отступов поле станет шире своего контейнера.
Исправить с помощью свойства box-sizing : border-box : теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.
Свойство display: inline-block
элементы с блочно-строчным боксом. В HTML нет элементов с блочно-строчным боксом по умолчанию, но любой элемент можно переключить такой режим отображения, задав ему свойство display со значением inline-block .
От строчных им достались следующие черты:
- по ширине они ужимаются под своё содержимое;
- могут располагаться в одну строку;
- реагируют на вертикальное выравнивание, vertical-align ;
- реагируют на горизонтальное выравнивание, text-align , заданное у родителя.
- им можно задавать размеры с помощью width и height ;
- а также внешние и внутренние отступы и рамки, которые работают во всех направлениях и увеличивают размер элемента.
Float — управление потоком
Если мы задаём элементу свойство float:left или float:right , то он прижимается к левому или правому краю, а также начинает ужиматься по ширине под своё содержимое. С той стороны, которая не прижата к краю родителя, появляется свободное место. Это место может быть занято другими элементами. Зафлоаченному элементу можно явно задавать размеры и отступы.
Зафлоаченные элементы выпадают из потока, но лишь частично:
- Блочные элементы, которые идут в коде после зафлоаченного блока, перестают его замечать. Они подтягиваются вверх и занимают его место, как будто его и нет.
- Строчные же элементы, расположенные в коде после зафлоаченного блока, начинают обтекать его со свободной стороны
Такое поведение флоатов даёт интересные эффекты:
- Эффект прохождения сквозь блоки. Проявляется, когда зафлоаченный элемент выше, чем несколько последующих за ним блоков.
- Эффект выпадания из родителя или схлопывания родителя. Проявляется тогда, когда все дочерние блоки в родителе зафлоачены. В этом случае родитель схлопывается по высоте, как будто в нём нет содержимого, а блоки выпадают из него.
Flex
- Блоки легко становятся гибкими, элементы могут сжиматься и растягиваться, заполняя пространство.
- Нет никаких проблем с тем чтобы выровнять элементы по вертикали и горизонтали.
- Неважно, в каком порядке расположены HTML-элементы. Вы можете изменить их порядок через CSS.
- Идеально выровнить элемент(ы) по центру обоих осей используя лишь margin: auto
- По-умолчанию можно создать блоки одинаковой высоты, что невозможно сделать в блочной модели
- Внешние отступы не схлопываются и не выпадают
Направление
Свойство flex-direction [ default row (→↓), row-reverse (←↓), column (↓→), column-reverse (↑→)] позволяет разворачивать главную ось во всех направлениях (а поперечную вниз\влево).
Распределение
Cвойство justify-content [ flex-start , flex-end , center , space-between , space-around ] определяет, как будут выровнены элементы вдоль главной оси [в начале, в конце, по-центру, равномерно (прижавшись к краям), равномерно (и 50% удалены от краев) ]
Свойство align-items [ default stretch , flex-start , flex-end , center , baseline ] определяет то, как будут выровнены элементы вдоль поперечной оси [ элементы растягиваются на всю «высоту» флекс-контейнера, в начале, в конце, по-центру, выравниваются по базовой линии текста внутри них]
Свойство align-self [ default stretch , flex-start , flex-end , center , baseline ] задает поперечное выравнивание отдельному элементу для самих флекс-элементов, а не для флекс-контейнера.
Перенос
Свойство flex-wrap [default nowrap , wrap , wrap-reverse ] позволяет переносить элементы на следующий ряд. По-умолчанию элементы не переносятся и будут сжиматься до минимально возможной ширины (указание ширины это не исправит). Если перестанут помещаться в контейнер и после уменьшения, то выйдут за его пределы, но продолжат располагаться в один ряд
Выравнивание Рядов
Свойство align-content [default stretch , flex-start , flex-end , center , space-between , space-around ]управляет выравниванием рядов флекс-элементов вдоль поперечной оси. Он действует на всю структуру контейнера (в отличии от align-items, который выравнивает элементы по своему ряду)
stretch растягивает ряды флекс-элементов, при этом оставшееся свободное место между ними делится поровну. Отображение строк при при этом зависит от значения align-items :
- Если у align-items задано значение stretch , то элементы в строках растягиваются на всю высоту своей строки.
- Если значение отлично от stretch , то элементы в строках ужимаются под своё содержимое и выравниваются в строках в зависимости от значения align-items .
Поля ввода с динамической шириной
Решить эту задачу можно только при помощи флексбокса. Превратим контейнер поля ввода во флекс-контейнер, все элементы внутри него превратятся во флекс-элементы, базовый размер которых будет зависеть от их содержания — flex-basis: auto; . И останется только задать ненулевой коэффициент растягивания полям ввода.
В широком контейнере всё будет работать отлично. Проблемы могут появиться в слишком узких контейнерах: по умолчанию поля ввода не будут сжиматься после определённой ширины, что приведёт к выпаданию текста из остальных элементов.
Чтобы справиться с этими проблемами, надо задать всем элементам кроме полей ввода нулевой коэффициент сжатия, а самим полям ввода явно прописать минимальную ширину.
Центрировать элемент внутри grid сетки
Как можно центрировать элемент внутри грид сетки (если он один, а сетка рассчитана на несколько)? Смысл следующий: у родителя может быть 3 элемента и тогда всё отлично. Но если элементов меньше 3х, они прижимаются к левому краю. Как можно сохранить гриды и при этом центрировать элементы, применив нечто вроде justify-content: center?
.content < display: grid; grid-template-columns: repeat(3, 1fr); max-width: 300px; border: 1px solid #000; >.block
Отслеживать
2,129 3 3 золотых знака 5 5 серебряных знаков 18 18 бронзовых знаков
Конфигурация
Руководство по настройке и кастомизации Вашей установки Tailwind.
Поскольку Tailwind — это фреймворк для создания индивидуальных пользовательских интерфейсов, он был разработан с нуля с учетом индивидуальных особенностей.
По умолчанию Tailwind будет искать необязательный файл tailwind.config.js в корне Вашего проекта, где вы можете определить любые настройки.
tailwind.config.js
module.exports = content: ['./src/**/*.'], theme: colors: 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', 'green': '#13ce66', 'yellow': '#ffc82c', 'gray-dark': '#273444', 'gray': '#8492a6', 'gray-light': '#d3dce6', >, fontFamily: sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], >, extend: spacing: '8xl': '96rem', '9xl': '128rem', >, borderRadius: '4xl': '2rem', > > >, >Каждый раздел файла конфигурации является необязательным, поэтому вам нужно только указать, что вы хотите изменить. Все отсутствующие разделы будут возвращены к конфигурации по умолчанию Tailwind.
Создание вашего файла конфигурации
Создайте файл конфигурации Tailwind для своего проекта с помощью утилиты Tailwind CLI, включенной после установки пакета npm tailwindcss :
npx tailwindcss initЭто создаст минимальный файл tailwind.config.js в корне Вашего проекта:
tailwind.config.js
module.exports = content: [], theme: extend: >, >, plugins: [], >Использование другого имени файла
Чтобы использовать имя, отличное от tailwind.config.js , передайте его в качестве аргумента в командной строке:
npx tailwindcss init tailwindcss-config.jsКогда вы используете собственное имя файла, вам нужно будет указать его в качестве аргумента командной строки при компиляции CSS с помощью инструмента Tailwind CLI:
npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.cssЕсли вы используете Tailwind в качестве плагина PostCSS, вам нужно будет указать собственный путь конфигурации в конфигурации PostCSS:
postcss.config.js
module.exports = plugins: tailwindcss: config: './tailwindcss-config.js' >, >, >В качестве альтернативы вы можете указать свой пользовательский путь конфигурации с помощью директивы @config :
@config "./tailwindcss-config.js"; @tailwind base; @tailwind components; @tailwind utilities;Узнайте больше о директиве @config в документации Функции и директивы documentation.
Создание файла конфигурации PostCSS
Используйте флаг -p , если вы хотите также сгенерировать базовый файл postcss.config.js вместе с файлом tailwind.config.js :
npx tailwindcss init -pЭто сгенерирует в Вашем проекте файл postcss.config.js , который выглядит следующим образом:
postcss.config.js
module.exports = plugins: tailwindcss: >, autoprefixer: >, >, >Строим всю конфигурацию по умолчанию
Для большинства пользователей мы рекомендуем, чтобы ваш файл конфигурации был как можно более минимальным и указывал только то, что вы хотите настроить.
Если вы предпочитаете создать полный файл конфигурации, включающий всю конфигурацию Tailwind по умолчанию, используйте параметр —full :
npx tailwindcss init --fullВы получите файл, соответствующий файлу конфигурации по умолчанию, который Tailwind использует для внутренних целей.
Варианты конфигурации
Содержимое
В разделе content вы настраиваете пути ко всем вашим HTML-шаблонам, компонентам JS и любым другим файлам, которые содержат имена классов Tailwind.
tailwind.config.js
module.exports = content: [ './pages/**/*.', './components/**/*.', ], // . >Дополнительные сведения о настройке источников контента смотрите в документации Конфигурация содержимого.
В разделе theme вы определяете свою цветовую палитру, шрифты, масштаб шрифта, размеры границ, контрольные точки — все, что связано с визуальным дизайном Вашего сайта.
tailwind.config.js
module.exports = // . theme: colors: 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#ff49db', 'orange': '#ff7849', 'green': '#13ce66', 'yellow': '#ffc82c', 'gray-dark': '#273444', 'gray': '#8492a6', 'gray-light': '#d3dce6', >, fontFamily: sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], >, extend: spacing: '8xl': '96rem', '9xl': '128rem', >, borderRadius: '4xl': '2rem', > > > >Узнайте больше о теме по умолчанию и о том, как ее настроить, в руководстве по настройке темы.
Раздел plugins позволяет вам регистрировать плагины в Tailwind, которые можно использовать для создания дополнительных утилит, компонентов, базовых стилей или пользовательских вариантов.
tailwind.config.js
module.exports = // . plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('tailwindcss-children'), ], >Узнайте больше о написании собственных плагинов в руководстве по созданию плагинов.
Раздел presets позволяет вам указать Вашу собственную базовую конфигурацию вместо использования базовой конфигурации Tailwind по умолчанию.
tailwind.config.js
module.exports = // . presets: [ require('@acmecorp/base-tailwind-config') ], // Индивидуальные настройки проекта theme: //. >, >Узнайте больше о предустановках в документации о пресетах.
Опция prefix позволяет вам добавить собственный префикс ко всем сгенерированным Tailwind служебным классам. Это может быть действительно полезно при наложении Tailwind поверх существующего CSS, где могут возникнуть конфликты имен.
Например, вы можете добавить префикс tw- , установив опцию prefix следующим образом:
tailwind.config.js
module.exports = prefix: 'tw-', >Теперь каждый класс будет сгенерирован с настроенным префиксом:
.tw-text-left text-align: left; > .tw-text-center text-align: center; > .tw-text-right text-align: right; > /* и так далее */Важно понимать, что этот префикс добавляется после любых модификаторов вариантов. Это означает, что классы с адаптивными модификаторами или модификаторами состояния, такими как sm: или hover: , по-прежнему будут иметь модификатор ответа или состояния первого, с вашим настраиваемым префиксом, появляющимся после двоеточия:
div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500"> div>Модификатор тире для отрицательных значений должен быть добавлен перед вашим префиксом, поэтому -mt-8 станет -tw-mt-8 , если вы настроили tw- в качестве префикса:
div class="-tw-mt-8"> div>Префиксы добавляются только к классам, созданным Tailwind; префикс не будет добавлен к вашим собственным пользовательским классам.
Это означает, что если вы добавите свою собственную утилиту, например:
@layer utilities .bg-brand-gradient /* . */ > >…у сгенерированных вариантов не будет вашего настроенного префикса:
.bg-brand-gradient /* . */ > .hover\:bg-brand-gradient:hover /* . */ >Если вы хотите добавить префикс к своим собственным утилитам, просто добавьте префикс в определение класса:
@layer utilities .tw-bg-brand-gradient /* . */ > >Опция important позволяет вам контролировать, должны ли утилиты Tailwind помечаться !important . Это может быть действительно полезно при использовании Tailwind с существующим CSS, который имеет селекторы высокой специфичности.
Чтобы сгенерировать утилиты как !important , установите ключ important в параметрах конфигурации на true :
tailwind.config.js
module.exports = important: true, >Теперь все служебные классы Tailwind будут сгенерированы как !important :
.leading-none line-height: 1 !important; > .leading-tight line-height: 1.25 !important; > .leading-snug line-height: 1.375 !important; > /* и так далее */Это также относится к любым пользовательским утилитам, которые вы определяете в своем CSS с помощью директивы @layer utilities directive:
/* Input */ @layer utilities .bg-brand-gradient background-image: linear-gradient(#3490dc, #6574cd); > > /* Output */ .bg-brand-gradient background-image: linear-gradient(#3490dc, #6574cd) !important; >Стратегия селектора
Установка для important значения true может вызвать некоторые проблемы при включении сторонних JS-библиотек, которые добавляют встроенные стили к Вашим элементам. В таких случаях утилиты Tailwind !important побеждают встроенные стили, которые могут нарушить ваш намеченный дизайн.
Чтобы обойти это, вы можете вместо этого установить important в селектор идентификаторов, например #app :
tailwind.config.js
module.exports = // . important: '#app', >Эта конфигурация будет префикс всех Ваших утилит с данным селектором, эффективно увеличивая их специфичность, не делая их на самом деле !important .
После того, как вы укажете селектор important , вам нужно будет убедиться, что корневой элемент Вашего сайта соответствует ему. Используя приведенный выше пример, нам нужно установить для атрибута id нашего корневого элемента значение app , чтобы стили работали правильно.
После того, как Ваша конфигурация полностью настроена и ваш корневой элемент соответствует селектору в Вашей конфигурации Tailwind, все утилиты Tailwind будут иметь достаточно высокую специфичность, чтобы победить другие классы, используемые в Вашем проекте, без вмешательства во встроенные стили:
html> style> .high-specificity .nested .selector color: blue; > style> body id="app"> div class="high-specificity"> div class="nested"> div class="selector text-red-500"> div> div> div> div class="text-red-500" style="color: #bada55;"> div> body> html>При использовании стратегии выбора убедитесь, что файл шаблона, который включает ваш корневой селектор, включен в вашу конфигурацию содержимого, в противном случае весь ваш CSS будет удален при сборке для производства.
Важный модификатор
Кроме того, вы можете сделать любую утилиту важной, добавив в начало символ ! :
p class="font-bold !font-medium"> Это будет средним шрифтом, несмотря на то, что полужирный шрифт появляется позже в CSS. p>! всегда стоит в начале имени утилиты, после любых вариантов, но перед любым префиксом:
div class="sm:hover:!tw-font-bold">Это может быть полезно в редких ситуациях, когда вам нужно повысить специфичность, потому что вы находитесь в состоянии войны с некоторыми стилями, которые вы не контролируете.
Разделитель
Опция separator позволяет вам настроить, какой символ должен использоваться для отделения модификаторов (размеры экрана, hover , focus и т. д.) от названий утилит ( text-center , items-end и т. д.).
По умолчанию мы используем двоеточие ( : ), но это может быть полезно изменить, если вы используете язык шаблонов, например Pug, который не поддерживает специальные символы в имени класса.
tailwind.config.js
module.exports = separator: '_', >Основные плагины
Раздел corePlugins позволяет полностью отключить классы, которые Tailwind обычно генерирует по умолчанию, если они вам не нужны для Вашего проекта.
Чтобы отключить определенные основные плагины, предоставьте объект для corePlugins , который устанавливает для этих плагинов значение false :
tailwind.config.js
module.exports = corePlugins: float: false, objectFit: false, objectPosition: false, > >Если вы хотите внести в список надежных отправителей, какие основные плагины должны быть включены, предоставьте массив, который включает список основных плагинов, которые вы хотите использовать:
tailwind.config.js
module.exports = corePlugins: [ 'margin', 'padding', 'backgroundColor', // . ] >Если вы хотите отключить все основные плагины Tailwind и просто использовать Tailwind как инструмент для обработки Ваших собственных плагинов, предоставьте пустой массив:
tailwind.config.js
module.exports = corePlugins: [] >Вот список всех основных плагинов для справки:
| Плагин Ядра | Описание |
|---|---|
| accentColor | Утилиты accent-color такие как accent-green-800 |
| accessibility | Утилиты sr-only и not-sr-only |
| alignContent | Утилиты align-content такие как content-between |
| alignItems | Утилиты align-items такие как items-center |
| alignSelf | Утилиты align-self такие как self-end |
| animation | Утилиты animation такие как animate-ping |
| appearance | Утилиты appearance такие как appearance-none |
| aspectRatio | Утилиты aspect-ratio такие как aspect-square |
| backdropBlur | Утилиты backdrop-blur такие как backdrop-blur-md |
| backdropBrightness | Утилиты backdrop-brightness такие как backdrop-brightness-100 |
| backdropContrast | Утилиты backdrop-contrast такие как backdrop-contrast-100 |
| backdropFilter | Утилиты backdrop-filter такие как backdrop-filter |
| backdropGrayscale | Утилиты backdrop-grayscale такие как backdrop-grayscale-0 |
| backdropHueRotate | Утилиты backdrop-hue-rotate такие как backdrop-hue-rotate-30 |
| backdropInvert | Утилиты backdrop-invert такие как backdrop-invert-0 |
| backdropOpacity | Утилиты backdrop-opacity такие как backdrop-opacity-50 |
| backdropSaturate | Утилиты backdrop-saturate такие как backdrop-saturate-100 |
| backdropSepia | Утилиты backdrop-sepia такие как backdrop-sepia-0 |
| backgroundAttachment | Утилиты background-attachment такие как bg-local |
| backgroundBlendMode | Утилиты background-blend-mode такие как bg-blend-color-burn |
| backgroundClip | Утилиты background-clip такие как bg-clip-padding |
| backgroundColor | Утилиты background-color такие как bg-green-800 |
| backgroundImage | Утилиты background-image такие как bg-gradient-to-br |
| backgroundOpacity | Утилиты opacity background-color , такие как bg-opacity-25 |
| backgroundOrigin | Утилиты background-origin такие как bg-origin-padding |
| backgroundPosition | Утилиты background-position такие как bg-left-top |
| backgroundRepeat | Утилиты background-repeat такие как bg-repeat-x |
| backgroundSize | Утилиты background-size такие как bg-cover |
| blur | Утилиты blur такие как blur-md |
| borderCollapse | Утилиты border-collapse такие как border-collapse |
| borderColor | Утилиты border-color такие как border-e-green-800 |
| borderOpacity | Утилиты opacity border-color , такие как border-opacity-25 |
| borderRadius | Утилиты border-radius такие как rounded-ss-lg |
| borderSpacing | Утилиты border-spacing такие как border-spacing-x-28 |
| borderStyle | Утилиты border-style такие как border-dotted |
| borderWidth | Утилиты border-width такие как border-e-4 |
| boxDecorationBreak | Утилиты box-decoration-break такие как decoration-clone |
| boxShadow | Утилиты box-shadow такие как shadow-lg |
| boxShadowColor | Утилиты box-shadow-color такие как shadow-green-800 |
| boxSizing | Утилиты box-sizing такие как box-border |
| breakAfter | Утилиты break-after такие как break-after-avoid-page |
| breakBefore | Утилиты break-before такие как break-before-avoid-page |
| breakInside | Утилиты break-inside такие как break-inside-avoid |
| brightness | Утилиты brightness такие как brightness-100 |
| captionSide | Утилиты caption-side такие как caption-top |
| caretColor | Утилиты caret-color такие как caret-green-800 |
| clear | Утилиты clear такие как clear-right |
| columns | Утилиты columns такие как columns-auto |
| container | Компонент container |
| content | Утилиты content такие как content-none |
| contrast | Утилиты contrast такие как contrast-100 |
| cursor | Утилиты cursor такие как cursor-grab |
| display | Утилиты display такие как table-column-group |
| divideColor | Утилиты между элементами border-color , например, divide-gray-500 |
| divideOpacity | Утилиты divide-opacity такие как divide-opacity-50 |
| divideStyle | Утилиты divide-style такие как divide-dotted |
| divideWidth | Утилиты между элементами border-width , например, divide-x-2 |
| dropShadow | Утилиты drop-shadow такие как drop-shadow-lg |
| fill | Утилиты fill такие как fill-green-700 |
| filter | Утилиты filter такие как filter |
| flex | Утилиты flex такие как flex-auto |
| flexBasis | Утилиты flex-basis такие как basis-px |
| flexDirection | Утилиты flex-direction такие как flex-row-reverse |
| flexGrow | Утилиты flex-grow такие как flex-grow |
| flexShrink | Утилиты flex-shrink такие как flex-shrink |
| flexWrap | Утилиты flex-wrap такие как flex-wrap-reverse |
| float | Утилиты float такие как float-left |
| fontFamily | Утилиты font-family такие как font-serif |
| fontSize | Утилиты font-size такие как text-3xl |
| fontSmoothing | Утилиты font-smoothing такие как antialiased |
| fontStyle | Утилиты font-style такие как italic |
| fontVariantNumeric | Утилиты font-variant-numeric такие как oldstyle-nums |
| fontWeight | Утилиты font-weight такие как font-medium |
| gap | Утилиты gap такие как gap-x-28 |
| gradientColorStops | Утилиты gradient-color-stops такие как via-emerald-700 |
| grayscale | Утилиты grayscale такие как grayscale-0 |
| gridAutoColumns | Утилиты grid-auto-columns такие как auto-cols-min |
| gridAutoFlow | Утилиты grid-auto-flow такие как grid-flow-dense |
| gridAutoRows | Утилиты grid-auto-rows такие как auto-rows-min |
| gridColumn | Утилиты grid-column такие как col-span-6 |
| gridColumnEnd | Утилиты grid-column-end такие как col-end-7 |
| gridColumnStart | Утилиты grid-column-start такие как col-start-7 |
| gridRow | Утилиты grid-row такие как row-span-3 |
| gridRowEnd | Утилиты grid-row-end такие как row-end-4 |
| gridRowStart | Утилиты grid-row-start такие как row-start-4 |
| gridTemplateColumns | Утилиты grid-template-columns такие как grid-cols-7 |
| gridTemplateRows | Утилиты grid-template-rows такие как grid-rows-4 |
| height | Утилиты height такие как h-72 |
| hueRotate | Утилиты hue-rotate такие как hue-rotate-30 |
| hyphens | Утилиты hyphens такие как hyphens-manual |
| inset | Утилиты inset такие как end-44 |
| invert | Утилиты invert такие как invert-0 |
| isolation | Утилиты isolation такие как isolate |
| justifyContent | Утилиты justify-content такие как justify-center |
| justifyItems | Утилиты justify-items такие как justify-items-end |
| justifySelf | Утилиты justify-self такие как justify-self-end |
| letterSpacing | Утилиты letter-spacing такие как tracking-normal |
| lineClamp | Утилиты line-clamp такие как line-clamp-4 |
| lineHeight | Утилиты line-height такие как leading-9 |
| listStyleImage | Утилиты list-style-image такие как list-image-none |
| listStylePosition | Утилиты list-style-position такие как list-inside |
| listStyleType | Утилиты list-style-type такие как list-disc |
| margin | Утилиты margin такие как me-28 |
| maxHeight | Утилиты max-height такие как max-h-40 |
| maxWidth | Утилиты max-width такие как max-w-6xl |
| minHeight | Утилиты min-height такие как min-h-screen |
| minWidth | Утилиты min-width такие как min-w-min |
| mixBlendMode | Утилиты mix-blend-mode такие как mix-blend-hard-light |
| objectFit | Утилиты object-fit такие как object-fill |
| objectPosition | Утилиты object-position такие как object-left-top |
| opacity | Утилиты opacity такие как opacity-50 |
| order | Утилиты order такие как order-8 |
| outlineColor | Утилиты outline-color такие как outline-green-800 |
| outlineOffset | Утилиты outline-offset такие как outline-offset-2 |
| outlineStyle | Утилиты outline-style такие как outline-dashed |
| outlineWidth | Утилиты outline-width такие как outline-2 |
| overflow | Утилиты overflow такие как overflow-x-hidden |
| overscrollBehavior | Утилиты overscroll-behavior такие как overscroll-y-contain |
| padding | Утилиты padding такие как pe-28 |
| placeContent | Утилиты place-content такие как place-content-between |
| placeItems | Утилиты place-items такие как place-items-center |
| placeSelf | Утилиты place-self такие как place-self-end |
| placeholderColor | Утилиты placeholder color , такие как placeholder-red-600 |
| placeholderOpacity | Утилиты placeholder color , такие как placeholder-opacity-25 |
| pointerEvents | Утилиты pointer-events такие как pointer-events-none |
| position | Утилиты position такие как absolute |
| preflight | Tailwind стили base/reset |
| resize | Утилиты resize такие как resize-y |
| ringColor | Утилиты ring-color такие как ring-green-800 |
| ringOffsetColor | Утилиты ring-offset-color такие как ring-offset-green-800 |
| ringOffsetWidth | Утилиты ring-offset-width такие как ring-offset-2 |
| ringOpacity | Утилиты ring-opacity такие как ring-opacity-50 |
| ringWidth | Утилиты ring-width такие как ring-4 |
| rotate | Утилиты rotate такие как rotate-6 |
| saturate | Утилиты saturate такие как saturate-100 |
| scale | Утилиты scale такие как scale-x-95 |
| scrollBehavior | Утилиты scroll-behavior такие как scroll-auto |
| scrollMargin | Утилиты scroll-margin такие как scroll-me-28 |
| scrollPadding | Утилиты scroll-padding такие как scroll-pe-28 |
| scrollSnapAlign | Утилиты scroll-snap-align такие как snap-end |
| scrollSnapStop | Утилиты scroll-snap-stop такие как snap-normal |
| scrollSnapType | Утилиты scroll-snap-type такие как snap-y |
| sepia | Утилиты sepia такие как sepia-0 |
| skew | Утилиты skew такие как skew-x-12 |
| space | Утилиты «space-between», например, space-x-4 |
| stroke | Утилиты stroke такие как stroke-green-700 |
| strokeWidth | Утилиты stroke-width такие как stroke-1 |
| tableLayout | Утилиты table-layout такие как table-auto |
| textAlign | Утилиты text-align такие как text-right |
| textColor | Утилиты text-color такие как text-green-800 |
| textDecoration | Утилиты text-decoration такие как overline |
| textDecorationColor | Утилиты text-decoration-color такие как decoration-green-800 |
| textDecorationStyle | Утилиты text-decoration-style такие как decoration-dotted |
| textDecorationThickness | Утилиты text-decoration-thickness такие как decoration-4 |
| textIndent | Утилиты text-indent такие как indent-28 |
| textOpacity | Утилиты text-opacity такие как text-opacity-50 |
| textOverflow | Утилиты text-overflow такие как overflow-ellipsis |
| textTransform | Утилиты text-transform такие как lowercase |
| textUnderlineOffset | Утилиты text-underline-offset такие как underline-offset-2 |
| touchAction | Утилиты touch-action такие как touch-pan-right |
| transform | Утилиты transform (для включения функций преобразования) |
| transformOrigin | Утилиты transform-origin такие как origin-bottom-right |
| transitionDelay | Утилиты transition-delay такие как delay-200 |
| transitionDuration | Утилиты transition-duration такие как duration-200 |
| transitionProperty | Утилиты transition-property такие как transition-colors |
| transitionTimingFunction | Утилиты transition-timing-function такие как ease-in |
| translate | Утилиты translate такие как translate-x-full |
| userSelect | Утилиты user-select такие как select-text |
| verticalAlign | Утилиты vertical-align такие как align-bottom |
| visibility | Утилиты visibility такие как invisible |
| whitespace | Утилиты whitespace такие как whitespace-pre |
| width | Утилиты width такие как w-1.5 |
| willChange | Утилиты will-change такие как will-change-scroll |
| wordBreak | Утилиты word-break такие как break-words |
| zIndex | Утилиты z-index такие как z-30 |
Использование нескольких конфигураций
Для проектов, которым необходимо создать несколько файлов CSS с использованием разных конфигураций Tailwind, используйте директиву @config , чтобы указать, какой файл конфигурации следует использовать для каждой точки входа CSS:
@config "./tailwind.site.config.js"; @tailwind base; @tailwind components; @tailwind utilities;@config "./tailwind.admin.config.js"; @tailwind base; @tailwind components; @tailwind utilities;Узнайте больше о директиве @config в документации Функции и директивы.
Ссылки в JavaScript
Часто бывает полезно ссылаться на значения Вашей конфигурации в Вашем собственном клиентском JavaScript — например, для доступа к некоторым из значений Вашей темы при динамическом применении встроенных стилей в компоненте React или Vue.
Чтобы упростить эту задачу, Tailwind предоставляет помощник resolveConfig , который вы можете использовать для генерации полностью объединенной версии Вашего объекта конфигурации:
import resolveConfig from 'tailwindcss/resolveConfig' import tailwindConfig from './tailwind.config.js' const fullConfig = resolveConfig(tailwindConfig) fullConfig.theme.width[4] // => '1rem' fullConfig.theme.screens.md // => '768px' fullConfig.theme.boxShadow['2xl'] // => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'Обратите внимание, что это транзитивно повлечет за собой множество наших зависимостей времени сборки, что приведет к увеличению размера пакета на стороне клиента. Чтобы избежать этого, мы рекомендуем использовать такой инструмент, как babel-plugin-preval для создания статической версии вашей конфигурации во время сборки.
Типы TypeScript
Мы поставляем собственные типы TypeScript для файла tailwind.config.js , который предоставляет вам всевозможную полезную поддержку IDE и значительно упрощает внесение изменений в вашу конфигурацию без обращения к документации.
Файлы конфигурации, сгенерированные с помощью интерфейса командной строки Tailwind, по умолчанию включают необходимую аннотацию типа, но для ручной настройки типов TypeScript просто добавьте аннотацию типа над объектом конфигурации:
tailwind.config.js
/** @type import('tailwindcss').Config> */ module.exports = content: [ // . ], theme: extend: >, >, plugins: [], >Как расположить div по центру
Очень часто возникает необходимость расположить div по центру экрана или другого div’a но не всегда удается достичь желаемого результата, а иногда не совсем понятно почему тот или иной способ не работает.
В данной статье рассмотрим некоторые способы задания положения div’a по центу с помощью таких приемов, как position, flexbox и grid.
Расположение по центру с помощью свойства position
Рассмотрим два способа расположить div по центру с применением свойства position. Для начала задаем родительскому диву position: relative. Для дочернего элемента указываем следующие свойства: position: absolute и другие:
.parentDiv position: relative; > // 1 способ .childDiv position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > // 2 способ .childDiv position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; >Оба представленных способа имеют одинаковый эффект, выбор остается лишь за вами.
Расположение по центру с помощью flexbox
Самый простой и распростаненный способ отцентрировать див с помощью flexbox — задать родительскому элементу следующие свойства:
.parentDiv display: flex; justify-content: center; align-items: center; >Задав эти свойста родительскому элементу, все дочерние элементы находящиеся внутри него примут центральное положение.
Чтобы выровнять по центру только один элемент внутри родительского, не затронув остальные, воспользуйтесь следующим методом:
.parentDiv display: flex; justify-content: center; > .childDiv align-self: center; >Этот способ похож на тот, который был описан выше с небольшим отличием. Свойство align-self: center следует указать тому элементу, который необходимо отцентровать. Это установит флекс-элемент по центру контейнера.
Еще один способ расположить отдельный div в центре родительского, указать дочернему элементу свойтво margin: auto.
.parentDiv display: flex; > .childDiv margin: auto; >Центрирование с помощью grid
По аналогии с первым способом, рассмотренным во втором пункте, можно заменить свойство display: flex на display: grid.
// display: flex .parentDiv display: flex; justify-content: center; align-items: center; > // display: grid .parentDiv display: grid; justify-content: center; align-items: center; >Свойство grid так же, как и flex позволяет отцентровать элемент внутри родительского div’a. Для этого родительскому элементу необходимо задать свойство display: grid, а дочернему указать расположение по вертикали и горизонтали center.
.parentDiv display: grid; > .childDiv align-self: center; justify-content: center; >Еще одним способом выравнивания по центру, является place-items: center. Place-items: center выравниет все элементы по оси строки и по оси столбца. Однако, если родительский элемент не является grid-контейнером, то свойство place-items не окажет на него никакого влияния.
.parentDiv display: grid; place-items: center; >Данный атрибут необходимо указать на родителе, и все элементы внутри него будут расположены по центру.
Теперь вы знаете каким способом можно отцентровать div �� И помните: keep calm and write code