Tailwind CSS: Перша утиліта CSS Framework та API для швидкого та адаптивного проектування

CSS Framework Tailwind

Хоча я щодня глибоко займаюся технікою, я не маю стільки часу, скільки хотів би поділитися складною інтеграцією та автоматизацією, яку впроваджує моя компанія для клієнтів. Крім того, я не маю багато часу на відкриття. Більшість технологій, про які я пишу, - це компанії, які шукають Martech Zone висвітлюючи їх, але час від часу - особливо через Twitter - я бачу деякий кайф навколо нової технології, якою мені потрібно поділитися.

Якщо ви працюєте у веб -дизайні, розробці мобільних додатків або навіть просто створюєте систему управління контентом, ви, напевно, боролися з розчаруванням конкуруючих стилів у різних таблицях стилів. Навіть із дивовижними інструментами розробки, вбудованими в кожен браузер, відстеження та очищення CSS може зажадати занадто багато часу та енергії.

Рамки CSS

За останні роки дизайнери зробили досить дивовижну роботу, випустивши колекції стилів, які готові і готові до використання. Ці таблиці стилів CSS більш відомі як CSS Frameworks, намагаючись врахувати всі різні стилі та чуйні можливості, щоб розробники могли просто посилатися на фреймворк, а не створювати файл CSS з нуля. Деякі популярні рамки:

  • Bootstrap - фреймворк, який розвивався протягом десятиліття, вперше представлений Twitter. Він пропонує незліченну кількість функцій. У нього є недоліки, він вимагає SASS, його важко перезаписати, залежить від JQquery, і завантажити його досить важко.
  • знайти -чистий фреймворк, зручний для розробників і не залежить від JavaScript.
  • фонд - більш загальний та зручний фреймворк CSS, який містить безліч компонентів, які легко налаштовуються. Крім того, є Фонд електронної пошти і Руховий інтерфейс для анімації.
  • Набір інтерфейсу користувача -комбінація HTML, JavaScript та CSS для швидкого та легкого розвитку вашого інтерфейсу.

CSS Framework Tailwind

У той час як інші фреймворки чудово працюють з розміщенням популярних елементів інтерфейсу користувача, Tailwind використовує методологію, відому як Атомний CSS. Одним словом, Tailwind винахідливо організував назви класів, використовуючи природну мову, щоб робити те, що вони кажуть. Отже, хоча Tailwind не має бібліотеки компонентів, можливість легко створити потужний адаптивний інтерфейс, просто посилаючись на назви класів CSS, є елегантною, швидкою та незрівнянною.

Ось кілька справді чудових прикладів:

Сітки CSS

css стовпці сітки початку колонки

Градієнти CSS

css градієнти

CSS для підтримки темного режиму

темний режим css

Tailwind також має фантастичний доступне розширення для VS Code, щоб ви могли легко ідентифікувати та вставляти класи з редактора коду Microsoft.

Ще більш винахідливо, Tailwind автоматично видаляє весь невикористаний CSS під час створення для виробництва, а це означає, що ваш остаточний пакет CSS - це найменший з можливих. Насправді, більшість проектів Tailwind надсилають клієнту менше 10 кБ CSS.

Що ви думаєте?

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.