Тази статия ще обясни:
- Какво правят екраните, цветовете и разстоянието в темата Tailwind?
- Как да използвате екрани, цветове и разстояние в темата Tailwind?
- Как да конфигурирате екрани, цветове и разстояние в темата Tailwind?
Какво правят екраните, цветовете и разстоянието в темата Tailwind?
The екрани ключът позволява на потребителите да променят отзивчивите точки на прекъсване в проекта Tailwind. Точките на прекъсване са точките, където оформлението се променя в зависимост от ширината на екрана. По подразбиране Tailwind включва пет екрана, т.е. sm (малък), md (среден), lg (голям) и xl (много голям). Потребителите обаче могат да дефинират своите точки на прекъсване с помощта на клавиша „screens“ и след това да ги използват в HTML програмата.
Цветове се използва за промяна на цветовата палитра. Цветовете са една от най-важните характеристики на дизайна. Темата Tailwind предоставя цветова палитра по подразбиране с широка гама от нюанси, но потребителите могат също да я персонализират или да я разширят със своите цветове. Потребителите могат да дефинират цветове с помощта на клавиша „цветове“ и след това да ги използват с произволен клас помощни програми, свързани с цвета, в HTML кода.
The разстояние се използва за промяна на разстоянието и мащаба на размера. Разстоянието е друг съществен аспект на дизайна, тъй като влияе върху четливостта, подравняването и баланса на елементите. Темата Tailwind осигурява последователна скала на разстоянието въз основа на базова стойност от 4 пиксела (0,25 rem). Въпреки това, той може също да бъде персонализиран или разширен с персонализирани стойности. Потребителите могат да дефинират стойности на интервали с помощта на клавиша „разстояние“ и след това да ги използват с произволен клас помощни програми, свързани с интервали в програмния файл.
Как да използвате екрани, цветове и разстояние в темата Tailwind?
За да използвате екрани, цветове и разстояние в темата Tailwind, направете HTML програма и използвайте свойствата на екрана, цветовете и разстоянието по подразбиране според изискванията. След това стартирайте HTML програмата и прегледайте HTML уеб страницата. Нека следваме следните стъпки:
Стъпка 1: Създайте HTML уеб страница
Първо направете HTML програма и използвайте свойствата на екрана, цветовете и разстоянието по подразбиране:
<тяло > = 'text-3xl m-5 sm:text-white text-center' >
Съвет за Linux!
>
= 'текст-2xl m-5 md:текст-бял център за текст' >
Добре дошли в този урок
>
= 'текст-2xl m-5 lg:текст-бял център за текст' >
Попътен вятър CSS
>
Добре дошли в този урок
>
= 'текст-2xl m-5 lg:текст-бял център за текст' >
Попътен вятър CSS
>
= 'текст-2xl m-5 xl:текст-бял център за текст' >
Теми
>
>
>
Тук:
- “ -p-10 ' и ' м-5 ” са свойството за разстояние.
- “ см ”, “ md ”, “ lg ', и ' xl ” са свойствата на екрана.
- “ червено-700 ”, “ синьо-600 ”, “ зелено-500 ”, “ розово-700 ', и ' бяло ” са свойствата на цвета.
Стъпка 2: Стартирайте HTML програма
След това стартирайте HTML програмата, за да видите HTML уеб страницата:
В горния резултат могат да се видят екраните по подразбиране, цветовете и свойствата на разстоянието.
Как да конфигурирате екрани, цветове и разстояние в темата Tailwind?
За да конфигурирате екрани, цветове и разстояние в темата Tailwind, вижте предоставените стъпки:
- Отвори ' tailwind.config.js ” файл.
- Отидете на „ тема ” и персонализирайте свойствата на екраните, цветовете и разстоянието, както е необходимо.
- Използвайте персонализираните свойства в HTML програмата.
- Вижте HTML уеб страницата за проверка.
Стъпка 1: Конфигурирайте екрани, цветове и разстояние в конфигурационния файл на Tailwind
в „ тема ” раздел на „ tailwind.config.js ”, персонализирайте екраните, цветовете и свойствата на разстоянието според нуждите. Например, ние персонализирахме тези свойства, както следва:
модул .износ = {съдържание : [ './index.html' ] ,
тема : {
//персонализиране на екрани
екрани : {
см : '480px' ,
md : '668px' ,
lg : '876px' ,
xl : '1100px' ,
} ,
//персонализиране на цветовете
цветове : {
бяло : #ffffff ,
черен : '#000000' ,
син : '#08609c' ,
зелено : '#089c28' ,
червен : '#9c0306' ,
жълто : '#ede60e' ,
розово : '#ed0e55' ,
} ,
//персонализиране на разстоянието
разстояние : {
px : '1px' ,
'0' : '0' ,
'1' : '0,25 rem' ,
'2' : '0,5 rem' ,
'3' : '0,75 rem' ,
'4' : '1 нещо' ,
'5' : '1,25 rem' ,
'6' : '1,5 rem' ,
'8' : '2rem' ,
'10' : '2,5 rem' ,
'12' : '3rem' ,
'16' : '4rem' ,
'двадесет' : '5rem' ,
}
} ,
} ;
В този код:
- „ екрани ” свойството дефинира точки на прекъсване на екрана за различни размери. Той предоставя псевдоними (като sm, md, lg, xl) и техните еквивалентни стойности.
- „ цветове ” свойството дефинира персонализирани цветове, като използва техните имена и двойки шестнадесетични стойности.
- „ разстояние ” свойството указва персонализирани стойности на разстояние за много размери. Той използва псевдоними (като px, 0, 1, 2 и т.н.), за да представи специфични стойности на разстояние в единици „rem“.
Стъпка 2: Използвайте конфигурирани свойства в HTML програма
Сега използвайте персонализираните свойства в HTML програмата:
<тяло > = 'text-3xl m-5 sm:text-white text-center' >
Съвет за Linux!
>
= 'текст-2xl m-5 md:текст-бял център за текст' >
Добре дошли в този урок
>
= 'текст-2xl m-5 lg:текст-бял център за текст' >
Попътен вятър CSS
>
Добре дошли в този урок
>
= 'текст-2xl m-5 lg:текст-бял център за текст' >
Попътен вятър CSS
>
= 'текст-2xl m-5 xl:текст-бял център за текст' >
Теми
>
>
>
Стъпка 3: Вижте HTML уеб страница
И накрая, проверете резултата, като прегледате HTML уеб страницата:
Може да се наблюдава, че съдържанието на уеб страницата се променя според конфигурираните екрани, цветове и свойства на разстоянието.
Заключение
The екрани позволява на потребителите да персонализират/променят отзивчивите точки на прекъсване, the цветове се използва за персонализиране на цветовата палитра за проекта и разстояние се използва за персонализиране на разстоянието и мащаба на размера. Освен това потребителите могат да персонализират тези ключове или свойства според нуждите си. Тази статия обяснява екраните, цветовете и разстоянието в темата Tailwind.