Тази публикация демонстрира процедурата за конфигуриране на пътищата на шаблона в Tailwind CSS.
Как да конфигурирате пътеки на шаблони в Tailwind CSS?
„ tailwind.config.js ” конфигурационният файл се използва за конфигуриране на пътищата на шаблона, в които потребителят иска да вгради CSS на Tailwind. Той не присъства по подразбиране, но може да бъде създаден в проекта с помощта на мениджъра на пакети „npm“.
Този раздел извършва някои основни стъпки за конфигуриране на пътищата на шаблона във файла „tailwind.config.js“.
Забележка : За да приложите „Tailwind CSS“, първо инсталирайте „ Node.js ” приложение във вашата система чрез предоставената връзка “ https://nodejs.org/en ”, за да изпълните командите.
Стъпка 1: Инсталирайте „TailwindCSS“
Първо създайте нов проект с име „Project1“ и го отворете в редактора на кодове. Сега отворете новия терминал и инсталирайте „Tailwind CSS“ с помощта на следната команда:
npm инсталирайте -D tailwindcss
В горната команда „ npm ” е мениджърът на пакети на възли, който инсталира „TailwindCSS”, както следва:
Тук изходът показва, че „Tailwind CSS“ и неговите пакети са изтеглени успешно.
Стъпка 2: Създайте конфигурационния файл на Tailwind
След това създайте конфигурационния CSS файл на Tailwind ' tailwind.config.js ”, за да разширите неговата функционалност като указване на пътеките на HTML шаблона, дефинирани от потребителя класове и много други с помощта на тази команда:
Резултатът показва, че зададеният конфигурационен файл е създаден. Сега погледнете „ tailwind.config.js ” файл:
Стъпка 3: Добавете директивите Tailwind към основния CSS файл
Сега, за да добавите специална функционалност към създадения проект Tailwind, добавете следните три съществуващи директиви за попътен вятър в главния ' style.css ” файл:
@tailwind компоненти;
@tailwind помощни програми;
В горния кодов блок:
- база : Това е първият слой на „Tailwind CSS“, който променя стила на уеб страницата по подразбиране като цвят на фона, цвят на текста или семейство шрифтове.
- компоненти : Този втори слой е наличен в класа „контейнер“, който добавя ширината според размера на браузъра. В неговия раздел потребителят може да добави собствени създадени външни компоненти.
- комунални услуги : Това е третият слой, който добавя почти всички класове за оформяне като сенки, цветове, добавяне, огъване и много други класове.
Тези директиви могат да се видят в следния прозорец:
Стъпка 4: Изградете CSS
Сега изградете CSS с помощта на CLI инструмента Tailwind, като изпълните следната команда. Той ще сканира всички шаблонни файлове и ще създаде CSS в „ dist/output.css ” файл:
Може да се види, че горната команда се изпълнява успешно. Сега файловата структура на „project1“ изглежда така:
Стъпка 5: Създайте HTML шаблон и конфигурирайте неговия път
Създайте HTML шаблона, в който потребителят иска да вгради „CSS на Tailwind“ и след това конфигурирайте пътя му в „ tailwind.config.js ”. Нека първо да разгледаме следния HTML шаблон ' index.html ”:
< връзка href = '/dist/output.css' отн = 'стилов лист' >
< / глава >
< тяло >
< h2 клас = 'text-center font-bold text-white bg-orange-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 файл ' /dist/output.css ' със съществуващия HTML файл ' index.html ”.
- Разделът „тяло“ първо определя „ ' таг, който дефинира първото подзаглавие с помощта на класа Tailwind ' Подравняване на текст ”, за да коригирате подравняването му в „център”, „ Тегло на шрифта ” за „удебеляване” на текста, „ Цвят на текста ”, за да добавите определения цвят, и „ Цвят на фона ”, за да приложите съответно дадения фонов цвят.
- След това „ “ и „ ” таговете също използват обсъдените по-горе класове Tailwind, за да стилизират своето съдържание.
Конфигурирайте пътя на HTML шаблона
След това отворете „ tailwind.config.js ” и добавете връзките или пътя в секцията „съдържание” на файла с HTML шаблон, т.е. „index.html”:
Натиснете ' Ctrl+S ”, за да запазите новите промени.
Стъпка 6: Изпълнете HTML кода
И накрая, изпълнете HTML кода „index.html“ в живия сървър и вижте изхода му:
Изход
Както се вижда, изходът показва стилизираното HTML съдържание с помощта на Tailwind CSS.
Заключение
Tailwind CSS използва „ tailwind.config.js ” конфигурационен файл, за да конфигурирате пътищата на създадения HTML шаблон. Той уточнява „ съдържание ”, който включва точния път на всички HTML шаблони, изходните файлове, съдържащи имена на класове на Tailwind, и компонентите на JavaScript. Той сканира посочения HTML файл и след това внедрява Tailwind CSS в неговото съдържание. Тази публикация илюстрира пълната процедура за конфигуриране на пътища на шаблони в Tailwind CSS.