Как использовать Tailwind CSS для быстрой разработки шикарных веб-сайтов

По мере того, как вы продвигаетесь как разработчик, вы с большей вероятностью будете использовать технологии, которые помогут вам делать больше, написав меньше кода. Надежный фреймворк, такой как Tailwind CSS, — один из способов добиться этого.

В этой статье мы узнаем о Tailwind CSS — CSS-фреймворке, который помогает создавать и проектировать веб-страницы. Мы начнем с объяснения того, как установить и интегрировать Tailwind CSS в ваш проект, рассмотрим некоторые практические приложения, а также то, как вы можете создавать собственные стили и плагины.

Возбужденный? Давай начнем!

Что такое Tailwind CSS?

Tailwind CSS — это ориентированная на утилиты среда CSS (каскадные таблицы стилей) с предопределенными классами, которые можно использовать для создания и оформления веб-страниц непосредственно в разметке. Он позволяет вам писать CSS в вашем HTML в виде предопределенных классов.

Мы определим, что такое фреймворк и что мы подразумеваем под «утилитарным CSS», чтобы помочь вам лучше понять, что такое Tailwind CSS.

Что такое фреймворк?

Как общий термин программирования, фреймворк — это инструмент, который предоставляет повторно используемые и готовые компоненты, построенные на основе функций уже существующего инструмента. Общая цель создания фреймворков — увеличить скорость разработки за счет меньшего объема работы.

Теперь, когда мы установили значение фреймворка, это должно помочь вам понять, что Tailwind CSS — это инструмент, основанный на функциях CSS. Все функциональные возможности фреймворка были получены из стилей CSS, составленных в виде классов.

Что такое Utility-First CSS Framework?

Когда мы говорим CSS, ориентированный на полезность, мы имеем в виду классы в нашей разметке (HTML) с предопределенными функциями. Это означает, что вам нужно только написать класс с прикрепленными к нему предопределенными стилями, и эти стили будут применены к элементу.

В случае, когда вы работаете с ванильным CSS (CSS без какой-либо структуры или библиотеки), вы должны сначала дать своему элементу имя класса, а затем прикрепить к этому классу различные свойства и значения, которые, в свою очередь, применят стиль к вашему элементу. .

Мы покажем вам пример. Здесь мы создадим кнопку с закругленными углами и текстом «Нажми меня». Вот как будет выглядеть кнопка:

Сначала мы сделаем это с помощью ванильного CSS, а затем с помощью служебных классов, доступных в Tailwind CSS.

С ванильным CSS

 <button class="btn">Click me</button>

Мы присвоили тегам кнопок класс btn , который будет оформлен с использованием внешней таблицы стилей. То есть:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

CSS с попутным ветром

 <button class="bg-black p-2 rounded">Click me</button>

Все это необходимо для достижения того же эффекта, что и в примере с ванильным CSS. Внешняя таблица стилей, в которую вы должны писать стили, не создавалась, потому что каждое имя класса, которое мы использовали, уже имеет предопределенный стиль.

Предварительные условия для использования Tailwind CSS

Прежде чем использовать Tailwind CSS, необходимо выполнить некоторые предварительные условия, чтобы без проблем использовать функции платформы. Вот несколько из них:

• Хорошее знание HTML, его структуры и принципов работы.
• Прочная основа в CSS — медиа-запросы, flexbox и система сеток.

Где можно использовать Tailwind CSS?

Вы можете использовать Tailwind CSS во внешних веб-проектах, включая фреймворки JavaScript, такие как React.js, Next.js, Laravel, Vite, Gatsby и т. д.

Плюсы и минусы Tailwind CSS

Вот некоторые преимущества использования Tailwind CSS:

1. Более быстрый процесс разработки
2. Помогает вам больше практиковать свой CSS, так как утилиты похожи
3. Все утилиты и компоненты легко настраиваются
4. Общий размер файла для производства обычно небольшой
5. Легко учиться, если вы уже знаете CSS
6. Хорошая документация для обучения

Вот некоторые из недостатков использования Tailwind CSS:

1. Ваша разметка может выглядеть неорганизованной для больших проектов, потому что все стили находятся в файлах HTML.
2. Нелегко учиться, если вы плохо понимаете CSS.
3. Вы вынуждены создавать все с нуля, включая элементы ввода. При установке Tailwind CSS удаляются все стили CSS по умолчанию.
4. Tailwind CSS — не лучший вариант, если вы хотите свести к минимуму время, затрачиваемое на разработку внешнего интерфейса вашего веб-сайта, и в основном сосредоточиться на логике внутреннего интерфейса.

Когда использовать Tailwind CSS

Tailwind CSS лучше всего использовать для ускорения процесса разработки за счет написания меньшего количества кода. Он поставляется с системой проектирования, которая помогает поддерживать согласованность различных требований к дизайну, таких как отступы, интервалы и т. д.; при этом вам не нужно беспокоиться о создании своих дизайн-систем.

Вы также можете использовать Tailwind CSS, если хотите использовать фреймворк, который легко настраивается, поскольку он не заставляет вас постоянно использовать компоненты (панели навигации, кнопки, формы и т. д.); вы можете выбрать, как должны выглядеть ваши компоненты. Но вы никогда не должны использовать Tailwind, если вы не изучали и не практиковали CSS.

Сходства и различия между Tailwind CSS и другими CSS-фреймворками

Вот несколько сходств:

1. Они помогают быстрее выполнять работу.
2. Они поставляются с предопределенными классами.
3. Они были построены на правилах CSS.
4. Они оба просты в освоении и использовании при практических знаниях CSS.

Теперь давайте посмотрим на некоторые отличия:

1. Tailwind отличается от большинства фреймворков тем, что вам нужно создавать свои компоненты. Например, в Bootstrap есть такие компоненты, как панели навигации, кнопки и т. д., но с Tailwind вам придется создавать все это самостоятельно.
2. Некоторые фреймворки, такие как Bootstrap, нелегко настроить, поэтому вы вынуждены использовать их шаблоны проектирования. В Tailwind вы контролируете поток всего.
3. Для использования Tailwind требуются глубокие знания CSS. Написать имена классов недостаточно, так как вы должны комбинировать их, как если бы вы писали обычный CSS, чтобы добиться того же результата. Все, что вам нужно знать в большинстве других фреймворков, это то, какой компонент будет создан, когда вы используете имя класса.

Как начать использовать Tailwind CSS

Прежде чем устанавливать Tailwind CSS и интегрировать его в свой проект, убедитесь, что:

1. На вашем компьютере установлен Node.js, чтобы использовать диспетчер пакетов Node (npm) в терминале.
2. Ваш проект настроен с вашими созданными файлами.

Вот как выглядит структура нашего проекта на данный момент:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Затем запустите терминал для вашего проекта и выполните следующие команды:

 npm install -D tailwindcss

Приведенная выше команда установит фреймворк Tailwind CSS в качестве зависимости. Затем создайте файл tailwind.config.js, выполнив следующую команду:

 npm install -D tailwindcss

Файл tailwind.config.js будет пустым при создании, поэтому мы должны добавить несколько строк кода:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Пути к файлам, указанные в массиве содержимого, позволят Tailwind очистить/удалить все неиспользуемые стили во время сборки.

Следующее, что нужно сделать, это добавить директивы «@tailwind» в ваш CSS-файл в папку src — именно здесь Tailwind создаст для вас все предопределенные служебные стили:

 @tailwind base; @tailwind components; @tailwind utilities;

Последнее, что нужно сделать, это запустить процесс сборки, выполнив эту команду в своем терминале:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

В приведенном выше коде мы сообщаем Tailwind, что наш входной файл — это таблица стилей в папке src, и что любые стили, которые мы использовали, должны быть встроены в выходной файл в общей папке. --watch позволяет Tailwind отслеживать изменения в вашем файле для автоматического процесса сборки; его отсутствие означает, что мы должны запускать этот скрипт каждый раз, когда хотим построить наш код и увидеть желаемый результат.

Использование CSS попутного ветра

Теперь, когда мы установили и настроили Tailwind CSS для нашего проекта, давайте рассмотрим несколько примеров, чтобы полностью понять его применение.

Пример флексбокса

Чтобы использовать flex в Tailwind CSS, вам нужно добавить класс flex, а затем направление flex-элементов:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Использование flex-row-reverse изменит порядок появления кнопок на противоположный.

flex-col размещает их друг над другом. Вот пример:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Как и в предыдущем примере, flex-col-reverse меняет порядок.

Пример сетки

При указании столбцов и строк в системе сетки мы используем другой подход, передавая число, которое будет определять, как элементы будут занимать доступное пространство:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Цвета

Tailwind поставляется с множеством предустановленных цветов. Каждый цвет имеет набор различных вариаций, самая светлая вариация — 50, а самая темная — 900.

Вот изображение нескольких цветов и их шестнадцатеричных кодов HTML, чтобы проиллюстрировать это.

Мы приведем пример того, как вы можете сделать это, используя красный цвет выше, чтобы придать элементу кнопки цвет фона:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Этот синтаксис одинаков для всех цветов в Tailwind, за исключением черного и белого, которые записываются одинаково, но без использования цифр: bg-black и bg-white .

Чтобы добавить цвет текста, вы используете класс text-{color} :

 <p class="text-yellow-600">Hello World</p>

Прокладка

В Tailwind уже есть дизайн-система, которая поможет вам поддерживать одинаковый масштаб в ваших проектах. Все, что вам нужно знать, это синтаксис для применения каждой утилиты.

Ниже приведены утилиты для добавления отступов к вашим элементам:

• p обозначает заполнение всего элемента.
• py обозначает заполнение padding-top и padding-bottom.
• px обозначает отступы слева и отступы справа.
• pt обозначает padding-top.
• pr обозначает право заполнения.
• pb обозначает нижнее заполнение.
• pl обозначает padding-left

Чтобы применить их к своим элементам, вам нужно будет использовать соответствующие числа, предоставленные Tailwind — немного похожие на числа, которые представляли варианты цвета в последнем разделе. Вот что мы имеем в виду:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Допуск

Предопределенные утилиты для отступов и полей очень похожи. Вы должны заменить p на m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Как создать CSS-плагин Tailwind

Несмотря на то, что в Tailwind CSS уже есть множество утилит и систем дизайна, уже созданных для вас, все же возможно, что у вас есть определенные функции, которые вы хотели бы добавить, чтобы расширить возможности Tailwind. Tailwind CSS позволяет нам сделать это, создав плагин.

Давайте запачкаем руки, создав плагин, который добавляет цвет морской волны и утилиту поворота, которая поворачивает элемент на 150 градусов по оси X. Мы создадим эти утилиты в файле tailwind.config.js , используя немного JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Теперь давайте разберем это. Первое, что мы сделали, это импортировали функцию плагина Tailwind:

 const plugin = require("tailwindcss/plugin");

Затем мы продолжили создавать наши плагины в массиве плагинов:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Возможно, вам придется перезапустить скрипт сборки после создания вашего плагина.

Теперь, когда плагины готовы, мы можем их протестировать:

 <button class="bg-aqua rotate-150deg">Click me</button>

Если вы все сделали правильно, у вас должна появиться кнопка цвета морской волны с текстом, повернутым на 150 по оси X.

Резюме

Фреймворки — бесценный вариант, когда речь идет об ускорении вашего рабочего процесса. Они помогают создавать красивые и профессиональные веб-страницы, сохраняя при этом единообразие дизайна. Tailwind CSS предоставляет множество полезных классов CSS, которые помогут вывести ваш веб-дизайн и разработку на новый уровень.

В этой статье мы узнали, что такое Tailwind CSS и что делает его фреймворком. Затем мы рассмотрели процесс установки и увидели несколько примеров, показывающих, как мы можем создавать собственные плагины для расширения существующей функциональности.

Если вы дошли до этого момента, то теперь у вас есть общее, но четкое представление о том, как работает Tailwind. Однако, чтобы лучше использовать такую ​​ориентированную на полезность структуру, вы должны продолжать практиковаться и расширять свои знания CSS, если у вас еще нет прочной основы.

Использовали ли вы Tailwind CSS или другую инфраструктуру CSS в прошлом? Поделитесь своими мыслями в разделе комментариев!