В этом посте демонстрируется процедура настройки путей к шаблонам в Tailwind CSS.
Как настроить пути к шаблонам в Tailwind CSS?
“ хвостовой ветер.config.js » используется для настройки путей к шаблонам, в которые пользователь хочет внедрить CSS Tailwind. По умолчанию его нет, однако его можно создать в проекте с помощью менеджера пакетов «npm».
В этом разделе выполняются некоторые важные шаги по настройке путей к шаблонам в файле «tailwind.config.js».
Примечание : Чтобы реализовать «Tailwind CSS», сначала установите « Node.js ” приложение в вашей системе по предоставленной ссылке ” https://nodejs.org/en » для выполнения команд.
Шаг 1: Установите «TailwindCSS»
Сначала создайте новый проект с именем «Project1» и откройте его в редакторе кода. Теперь откройте новый терминал и установите «Tailwind CSS» с помощью следующей команды:
npm установить -D tailwindcss
В приведенной выше команде « нпм » — менеджер пакетов узла, который устанавливает «TailwindCSS» следующим образом:
Здесь выходные данные показывают, что «Tailwind CSS» и его пакеты успешно загружены.
Шаг 2: Создайте файл конфигурации попутного ветра
Затем создайте файл конфигурации Tailwind CSS « хвостовой ветер.config.js », чтобы расширить его функциональные возможности, такие как указание путей к шаблонам HTML, пользовательских классов и многих других, с помощью этой команды:
Вывод показывает, что указанный файл конфигурации создан. А теперь посмотрите на « хвостовой ветер.config.js ' файл:
Шаг 3: Добавьте директивы Tailwind в основной файл CSS
Теперь, чтобы добавить специальные функции в созданный проект Tailwind, добавьте следующие три ранее существовавшие директивы Tailwind в основной « стиль.css ' файл:
компоненты @tailwind;
утилиты @tailwind;
В приведенном выше блоке кода:
- база : это первый уровень «Tailwind CSS», который изменяет стиль веб-страницы по умолчанию, например, цвет фона, цвет текста или семейство шрифтов.
- компоненты : этот второй слой доступен внутри класса «контейнер», который добавляет ширину в соответствии с размером браузера. В его раздел пользователь может добавлять созданные им внешние компоненты.
- утилиты : это третий слой, который объединяет почти все классы стилей, такие как тени, цвета, добавление, гибкость и многие другие классы.
Эти директивы можно увидеть в следующем окне:
Шаг 4: Создайте CSS
Теперь создайте CSS с помощью инструмента интерфейса командной строки Tailwind, выполнив следующую команду. Он просканирует все файлы шаблона и создаст CSS в « расстояние/output.css ' файл:
Можно заметить, что приведенная выше команда выполнена успешно. Теперь файловая структура «проекта1» выглядит так:
Шаг 5. Создайте шаблон HTML и настройте его путь
Создайте HTML-шаблон, в который пользователь хочет встроить «Tailwind CSS», а затем настройте его путь в « хвостовой ветер.config.js ». Давайте сначала посмотрим на следующий HTML-шаблон « index.html ”:
< связь href '=' '/расстояние/output.css' отн. '=' 'таблица стилей' >
< / голова >
< тело >
< h2 сорт '=' 'текст-центр шрифт-полужирный текст-белый bg-оранжевый-500' >Добро пожаловать в Linuxhint!< / h2 >< бр >
< h3 сорт '=' 'text-center font-bold text-blue-600 bg-pink-400' >Первый учебник: Tailwind CSS Framework.< / h3 >< бр >
< п сорт '=' 'текст-центр текст-зеленый-500' >Tailwind CSS — это хорошо известная структура CSS, которая помогает настроить предопределенные классы CSS для стиль ваши элементы HTML.< / п >
< / тело >
В приведенных выше строках кода:
- В разделе «голова» используется « <ссылка> ” для ссылки на созданный/скомпилированный файл CSS “ /расстояние/output.css 'с существующим файлом HTML' index.html ».
- В разделе «тело» сначала указывается « », который определяет первый подзаголовок с использованием класса Tailwind « Выравнивание текста », чтобы отрегулировать его выравнивание по «центру», « Вес шрифта », чтобы выделить текст жирным шрифтом, « Цвет текста », чтобы добавить указанный цвет, и « Фоновый цвет », чтобы применить заданный цвет фона соответственно.
- Далее « ” и “ <р> ” также используют рассмотренные выше классы Tailwind для стилизации своего содержимого.
Настроить путь к шаблону HTML
Далее откройте « хвостовой ветер.config.js » и добавьте ссылки или путь в раздел «content» файла шаблона HTML, т. е. «index.html»:
Нажимать ' Ctrl+S », чтобы сохранить новые изменения.
Шаг 6. Выполните HTML-код
Наконец, выполните HTML-код «index.html» на рабочем сервере и посмотрите его результат:
Выход
Как видно, выходные данные отображают стилизованное HTML-содержимое с помощью Tailwind CSS.
Заключение
В CSS Tailwind используется « хвостовой ветер.config.js », чтобы настроить созданные пути к шаблону HTML. В нем указывается « содержание », который включает точный путь ко всем HTML-шаблонам, исходным файлам, содержащим имена классов Tailwind, и компонентам JavaScript. Он сканирует указанный файл HTML, а затем реализует CSS Tailwind в его содержимом. В этом посте показана полная процедура настройки путей к шаблонам в Tailwind CSS.