Tailwind CSS шаблоны - Emmet в Far Manager

Введение

В этом разделе представлены шаблоны для создания компонентов с Tailwind CSS классами с помощью Emmet в редакторе Far Manager. Эти шаблоны помогают быстро создавать часто используемые UI-компоненты.

Совет: Для активации Emmet в редакторе Far Manager используйте комбинацию клавиш Ctrl+E (по умолчанию).

Контейнеры и сетки

Шаблоны для создания основных структурных элементов.

Сокращение	Описание	Результат
tw:container	Container	div с классами container mx-auto
tw:cnt	Container (синоним)	Альтернатива для tw:container
tw:grid	Grid	div с классами grid grid-cols-1 gap-4
tw:grd	Grid (синоним)	Альтернатива для tw:grid
tw:flex	Flex	div с классом flex
tw:flx	Flex (синоним)	Альтернатива для tw:flex
tw:flexcol	Flex column	div с классами flex flex-col
tw:flxc	Flex column (синоним)	Альтернатива для tw:flexcol

Пример использования: tw:container>tw:grid>div*3
Результат: Создаст контейнер с сеткой и тремя дочерними элементами

Кнопки

Шаблоны для создания кнопок с различными стилями.

Сокращение	Описание	Результат
tw:btn	Button	Кнопка с синим стилем
tw:btn-primary	Primary button	Кнопка с синим стилем и фокус-эффектами
tw:btn-primary sm	Primary button (синоним)	Альтернатива для tw:btn-primary
tw:btn-secondary	Secondary button	Кнопка с серым стилем
tw:btn-secondary sm	Secondary button (синоним)	Альтернатива для tw:btn-secondary
tw:btn-success	Success button	Кнопка с зеленым стилем
tw:btn-success sm	Success button (синоним)	Альтернатива для tw:btn-success
tw:btn-danger	Danger button	Кнопка с красным стилем
tw:btn-danger sm	Danger button (синоним)	Альтернатива для tw:btn-danger

Пример использования: tw:btn-primary
Результат: Создаст кнопку с Tailwind-классами для primary стиля

Компоненты UI

Шаблоны для создания различных UI-компонентов.

Сокращение	Описание	Результат
tw:card	Card	Карточка с белым фоном и тенями
tw:crd	Card (синоним)	Альтернатива для tw:card
tw:alert	Alert	Желтый алерт с границей
tw:alrt	Alert (синоним)	Альтернатива для tw:alert
tw:alert-success	Success alert	Зеленый алерт с границей
tw:alrt success	Success alert (синоним)	Альтернатива для tw:alert-success
tw:alert-danger	Danger alert	Красный алерт с границей
tw:alrt danger	Danger alert (синоним)	Альтернатива для tw:alert-danger
tw:avatar	Avatar	Круглый аватар с серым фоном
tw:avt	Avatar (синоним)	Альтернатива для tw:avatar
tw:badge	Badge	Значок с синим фоном
tw:bgd	Badge (синоним)	Альтернатива для tw:badge

Пример использования: tw:card>tw:alert+tw:badge
Результат: Создаст карточку с алертом и значком

Формы

Шаблоны для создания элементов форм.

Сокращение	Описание	Результат
tw:form	Form	Форма с классами для вертикальных отступов
tw:frm	Form (синоним)	Альтернатива для tw:form
tw:input	Input	Текстовое поле с Tailwind-стилями
tw:inp	Input (синоним)	Альтернатива для tw:input
tw:input group	Input group	Контейнер для группы полей ввода
tw:label	Label	Метка с Tailwind-стилями
tw:lbl	Label (синоним)	Альтернатива для tw:label

Пример использования: tw:form>tw:label+tw:input
Результат: Создаст форму с меткой и полем ввода

Навигация и макет

Шаблоны для создания навигационных элементов и макетов.

Сокращение	Описание	Результат
tw:navbar	Navbar	Навигационная панель с темным фоном
tw:nvbr	Navbar (синоним)	Альтернатива для tw:navbar
tw:navlink	Nav link	Ссылка для навигации
tw:nvlk	Nav link (синоним)	Альтернатива для tw:navlink
tw:modal	Modal	Модальное окно с затемнением фона
tw:mdl	Modal (синоним)	Альтернатива для tw:modal
tw:modal content	Modal content	Содержимое модального окна
tw:mdlc	Modal content (синоним)	Альтернатива для tw:modal content

Пример использования: tw:navbar>tw:navlink*3
Результат: Создаст навигационную панель с тремя ссылками

Прогресс и вспомогательные элементы

Шаблоны для создания прогресс-баров и других вспомогательных элементов.

Сокращение	Описание	Результат
tw:progress	Progress bar container	Контейнер для прогресс-бара
tw:prgs	Progress (синоним)	Альтернатива для tw:progress
tw:progress bar	Progress bar	Сам прогресс-бар
tw:prgsb	Progress bar (синоним)	Альтернатива для tw:progress bar
tw:tooltip	Tooltip container	Контейнер для всплывающей подсказки
tw:ttip	Tooltip (синоним)	Альтернатива для tw:tooltip
tw:tooltip text	Tooltip text	Текст всплывающей подсказки
tw:ttipt	Tooltip text (синоним)	Альтернатива для tw:tooltip text

Пример использования: tw:progress>tw:progress bar
Результат: Создаст контейнер прогресс-бара с внутренним элементом

Советы по использованию

Совет 1: Используйте синонимы для быстрого доступа к часто используемым шаблонам. Например, tw:btn для быстрой кнопки.

Совет 2: Комбинируйте шаблоны для создания сложных компонентов. Например: tw:card>tw:btn-primary+tw:btn-secondary.

Совет 3: Используйте шаблоны для быстрого прототипирования интерфейсов с Tailwind CSS.

Совет 4: Для адаптивности комбинируйте шаблоны с Tailwind-классами напрямую: div.tw-container>div.grid.grid-cols-1.md:grid-cols-3.