Эта статья объяснит:
- Что делают экраны, цвета и интервалы в теме Tailwind?
- Как использовать экраны, цвета и интервалы в теме Tailwind?
- Как настроить экраны, цвета и интервалы в теме Tailwind?
Что делают экраны, цвета и интервалы в теме Tailwind?
экраны key позволяет пользователям изменять адаптивные точки останова в проекте Tailwind. Точки останова — это точки, в которых макет изменяется в зависимости от ширины экрана. По умолчанию Tailwind включает пять экранов: sm (маленький), md (средний), lg (большой) и xl (очень большой). Однако пользователи могут определить свои точки останова с помощью клавиши «экраны», а затем использовать их в программе HTML.
Цвета клавиша используется для изменения цветовой палитры. Цвета являются одним из ключевых элементов дизайна. Тема Tailwind предоставляет цветовую палитру по умолчанию с широким диапазоном оттенков, но пользователи также могут настроить ее или расширить с помощью своих цветов. Пользователи могут определять цвета с помощью ключа «colors», а затем использовать их с любым служебным классом, связанным с цветом, в HTML-коде.
интервал Клавиша используется для изменения интервала и шкалы размеров. Расстояние — еще один важный аспект дизайна, поскольку он влияет на удобочитаемость, выравнивание и баланс элементов. Тема «Попутный ветер» обеспечивает согласованную шкалу интервалов, основанную на базовом значении 4 пикселя (0,25 бэр). Однако его также можно настроить или расширить с помощью пользовательских значений. Пользователи могут определить значения интервалов с помощью клавиши «spacing», а затем использовать их с любым служебным классом, связанным с интервалами, в программном файле.
Как использовать экраны, цвета и интервалы в теме Tailwind?
Чтобы использовать экраны, цвета и интервалы в теме Tailwind, создайте HTML-программу и при необходимости используйте свойства экрана, цветов и интервалов по умолчанию. Затем запустите программу HTML и просмотрите веб-страницу HTML. Давайте выполним следующие шаги:
Шаг 1: Создайте веб-страницу HTML
Во-первых, создайте программу HTML и используйте свойства экрана, цветов и интервалов по умолчанию:
<тело ><класс деления '=' 'ч-экран п-10 см:бг-красный-700 мд:бг-синий-600 лг:бг-зеленый-500 xl:бг-розовый-700' >
'=' 'текст-3xl м-5 см: текст-белый текст-центр' >
Линукс подсказка!
>
'=' «текст-2xl m-5 md: текст-белый текст-центр» >
Добро пожаловать в этот учебник
>
'=' 'текст-2xl m-5 lg: текст-белый текст-центр' >
Попутный ветер CSS
>
<р-класс '=' «текст-2xl m-5 xl: текст-белый текст-центр» >
Темы
>
>
>
Добро пожаловать в этот учебник
>
'=' 'текст-2xl m-5 lg: текст-белый текст-центр' >
Попутный ветер CSS
>
<р-класс '=' «текст-2xl m-5 xl: текст-белый текст-центр» >
Темы
>
>
>
Здесь:
- “ -р-10 ' и ' м-5 ” являются свойством интервала.
- “ см », « Мэриленд », « LG ', и ' XL ” — это свойства экрана.
- “ красный-700 », « синий-600 », « зеленый-500 », « розовый-700 ', и ' белый ” – это свойства цвета.
Шаг 2: Запустите HTML-программу
Затем запустите программу HTML, чтобы просмотреть веб-страницу HTML:
В приведенном выше выводе можно увидеть экраны по умолчанию, цвета и свойства интервалов.
Как настроить экраны, цвета и интервалы в теме Tailwind?
Чтобы настроить экраны, цвета и интервалы в теме Tailwind, выполните указанные шаги:
- Открой ' хвостовой ветер.config.js ' файл.
- Перейти к « тема » и настройте экраны, цвета и свойства интервалов по мере необходимости.
- Используйте настраиваемые свойства в программе HTML.
- Просмотрите веб-страницу HTML для проверки.
Шаг 1. Настройте экраны, цвета и интервалы в файле конфигурации Tailwind.
В ' тема » раздел « хвостовой ветер.config.js », настройте экраны, цвета и свойства интервалов в соответствии с потребностями. Например, мы настроили эти свойства следующим образом:
модуль .экспорт '=' {содержание : [ './index.html' ] ,
тема : {
//настройка экранов
экраны : {
см : «480 пикселей» ,
Мэриленд : «668 пикселей» ,
LG : «876 пикселей» ,
XL : «1100 пикселей» ,
} ,
//настройка цветов
цвета : {
белый : #фффффф ,
черный : '#000000' ,
синий : '# 08609c' ,
зеленый : '# 089c28' ,
красный : '# 9c0306' ,
желтый : '#ede60e' ,
розовый : '#ed0e55' ,
} ,
//настройка интервала
интервал : {
пикс. : «1 пиксель» ,
'0' : '0' ,
'1' : «0,25 бэр» ,
'2' : «0,5 бэр» ,
«3» : «0,75 бэр» ,
«4» : '1 вещь' ,
«5» : «1,25 бэр» ,
6 : «1,5 бэр» ,
«8» : 2рем ,
«10» : «2,5 бэр» ,
'12' : '3rem' ,
'16' : 4рем ,
'двадцать' : '5рем' ,
}
} ,
} ;
В этом коде:
- “ экраны ” определяет точки останова экрана для разных размеров. Он предоставляет псевдонимы (такие как sm, md, lg, xl) и их эквивалентные значения.
- “ цвета ” определяет пользовательские цвета, используя пары их имен и шестнадцатеричных значений.
- “ интервал ” задает пользовательские значения интервалов для многих размеров. Он использует псевдонимы (например, px, 0, 1, 2 и т. д.) для представления конкретных значений интервалов в единицах «бэр».
Шаг 2. Используйте настроенные свойства в программе HTML
Теперь используйте настроенные свойства в программе HTML:
<тело ><класс деления '=' 'h-экран p-10 sm:bg-красный md:bg-синий lg:bg-зеленый xl:bg-розовый' >
'=' 'текст-3xl м-5 см: текст-белый текст-центр' >
Линукс подсказка!
>
'=' «текст-2xl m-5 md: текст-белый текст-центр» >
Добро пожаловать в этот учебник
>
'=' 'текст-2xl m-5 lg: текст-белый текст-центр' >
Попутный ветер CSS
>
<р-класс '=' «текст-2xl m-5 xl: текст-белый текст-центр» >
Темы
>
>
>
Шаг 3. Просмотр веб-страницы в формате HTML
Добро пожаловать в этот учебник
>
'=' 'текст-2xl m-5 lg: текст-белый текст-центр' >
Попутный ветер CSS
>
<р-класс '=' «текст-2xl m-5 xl: текст-белый текст-центр» >
Темы
>
>
>
Шаг 3. Просмотр веб-страницы в формате HTML
Наконец, проверьте вывод, просмотрев веб-страницу HTML:
Можно заметить, что содержимое веб-страницы изменяется в соответствии с настроенными экранами, цветами и свойствами интервалов.
Заключение
экраны ключ позволяет пользователям настраивать/изменять чувствительные точки останова, цвета ключ используется для настройки цветовой палитры для проекта и интервал Клавиша используется для настройки интервала и шкалы размеров. Более того, пользователи могут настраивать эти ключи или свойства в соответствии со своими потребностями. В этой статье описаны экраны, цвета и интервалы в теме Tailwind.