Этот пост иллюстрирует все возможные аспекты добавления «базовых стилей» в Tailwind CSS.
Как добавить «базовые» стили в Tailwind?
«Tailwind CSS» включает следующие три метода добавления «базовых» стилей ко всему содержимому HTML или к определенному элементу:
- Используйте «CSS», чтобы добавить базовые стили в Tailwind.
- Используйте «Плагин», чтобы добавить базовые стили в Tailwind.
Давайте рассмотрим их один за другим.
Предпосылки
Прежде чем перейти к практической реализации, сначала взгляните на недавно созданный проект под названием «Linuxhint», который используется для добавления «базовых стилей»:
Структура файла проекта
Теперь перейдите к файлу «index.html» и посмотрите на его HTML-код:
< HTML >< голова >
< связь href '=' '/расстояние/output.css' отн. '=' 'таблица стилей' >
< / голова >
< тело >
< h2 сорт '=' 'подчеркнутый текст-центр шрифт-полужирный текст-розовый-600' > Добро пожаловать в Линуксинт! < / h2 >< бр >
< h3 сорт '=' 'текст-центр шрифт-полужирный текст-оранжевый-600' > Учебник: добавление базовых стилей в Tailwind. < / h3 >< бр >
< / тело >
В приведенных выше строках кода:
Выход
Вывод приведенного выше кода показан здесь:
Теперь используйте обсуждаемый метод, чтобы настроить приведенный выше HTML-код, добавив базовые стили. Начнем с метода Tailwind «CSS».
Способ 1: Используйте CSS для добавления «базовых стилей» в Tailwind
Самый простой и легкий способ добавить базовый стиль к конкретному элементу HTML — это добавить их в основной файл CSS проекта. Давайте выполним эту задачу практически, выполнив указанные шаги.
Шаг 1: Откройте файл CSS
Сначала откройте основной файл CSS, т. е. « стиль.css », который содержит встроенные слои попутного ветра «база», «компоненты» и «утилиты»:
Шаг 2: Добавьте CSS
Затем добавьте «базовый» стиль для определенных HTML-элементов «
» и «», применив классы с помощью « @применять » в «базовом» слое с помощью « @слой ключевое слово. Ключевые слова «@layer» добавляют определенные классы к указанному «базовому» слою: @слойная база {
h2 {
@применить текст-3xl;
}
h3 {
@применить текст-xl;
}
}
h2 {
@применить текст-3xl;
}
h3 {
@применить текст-xl;
}
}
В приведенных выше строках кода « Размер шрифта » применяется к элементам «
» и «», чтобы увеличить их до указанного размера соответственно:
Сохраните (Ctrl+S) файл.
Шаг 3: Вывод
Теперь запустите код на рабочем сервере и посмотрите на результат:
Здесь выходные данные показывают, что класс Tailwind «Размер шрифта» успешно применен к указанному элементу в базовом слое.
Примечание : тот же подход используется для всех остальных классов CSS Tailwind.
Способ 2: Используйте плагин для добавления «базовых стилей» в Tailwind
Еще один полезный способ добавить «базовые» стили — написать « плагин ” и используйте “ добавить базу() функция. Эта функция помогает регистрировать новые классы в « база ” директива слоя. Эта функция используется в файле Tailwind «tailwind.config.js». Сделаем это практически.
Шаг 1: Определите функцию «addBase()»
Сначала перейдите в раздел « хвостовой ветер.config.js », добавьте базовые стили из плагина и вызовите функцию «addBase()»:
Сохраните файл.
Шаг 2: Вывод
Наконец, запустите данный HTML-код и посмотрите результат:
Как видно, класс Tailwind «Размер шрифта», определенный в функции «addBase()» как объект JavaScript, применяется к указанным элементам HTML.
Заключение
Базовые стили попутного ветра можно легко добавить с помощью кнопки « CSS ' в основном файле CSS и ' Плагин ” с “ добавить базу() ” в файле конфигурации. Метод «CSS» считается самым простым методом, поскольку он определяет только базовые стили в «базовом» слое и автоматически применяет их к указанному элементу. С другой стороны, раздел «плагин» в « хвостовой ветер.config.js » требуется функция «addBase()», чтобы определить базовые стили как объекты JavaScript. В этом посте показаны все возможные аспекты добавления базовых стилей в Tailwind CSS.