В этом уроке я хотел бы познакомить вас с одним из самых быстрорастущих и перспективных CSS Framework на данный момент Tailwind CSS. Он отличается от других фреймворков, таких как Bootstrap, потому что он построен на новом способе построения пользовательских интерфейсов с использованием структуры классов CSS, ориентированных на служебные программы, в отличие от структуры OOCSS из других фреймворков.
К концу этого руководства вы сможете установить, настроить и создать раздел адаптивного героя (живая демонстрация), используя классы служебной программы из Tailwind CSS, и настроить проект с помощью рекомендованного файла конфигурации Tailwind с поддержкой PostCSS для лучшего ремонтопригодность и универсальность.
Вот содержание этого руководства по Tailwind CSS:
Перед тем, как начать, ниже вы найдете окончательную структуру папок, которая должна быть у вас к концу этого руководства.
Я считаю, что будет полезно, если вы заблудитесь по пути. Если вы хотите загрузить файлы, вы можете найти их в нашем общедоступном репозитории Github под лицензией MIT.
Tailwind CSS — самый популярный в мире фреймворк CSS для быстрого создания пользовательских интерфейсов для Интернета. Это набор настраиваемых низкоуровневых служебных классов CSS, написанных на PostCSS и предназначенных для настройки с помощью JavaScript.
Первый выпуск Tailwind CSS состоялся 1 ноября 2017 года на GitHub в качестве проекта с открытым исходным кодом. Изначально это был лишь побочный проект Адама Уотана, который помог ему с некоторыми из его проектов, но со временем он превратился в полноценный и популярный фреймворк CSS с новой методологией первоочередности полезности.
По оценкам, к началу августа 2020 года он был загружен более 10 миллионов раз, что делает его одним из самых быстрорастущих фреймворков CSS в мире в то время, а к концу сентября 2020 года предполагается, что к официальной документации Tailwind CSS получили доступ более 1 миллиона разработчиков по всему миру.
Он отличается от других CSS-фреймворков, таких как Bootstrap, из-за нового способа создания пользовательских интерфейсов с использованием подхода, ориентированного на служебные программы, а не объектно-ориентированного. Некоторое время назад я написал довольно обширную статью, в которой сравнивал Bootstrap и Tailwind.
Добавление Tailwind CSS в ваш проект с помощью диспетчера пакетов
Есть несколько способов включения Tailwind CSS в ваш проект, и хотя вы можете сделать это очень быстро через CDN, наиболее рекомендуемый метод — использовать менеджер пакетов, а затем полностью использовать возможности конфигурации через PostCSS, используя строительные инструменты.
В этом руководстве я покажу вам, как включить последнюю стабильную версию Tailwind CSS через NPM, а затем создать файл конфигурации Tailwind и обработать CSS на его основе.
Прежде всего, убедитесь, что на вашем компьютере установлены Node.js и NPM. Если у вас еще нет файла package.json, выполните следующую команду, используя терминал внутри корневого каталога вашего проекта:
npm init
Будет создан файл package.json, содержащий информацию о вашем проекте и будущих зависимостях библиотеки. После этого выполните следующую команду в своем терминале, чтобы установить последнюю стабильную версию Tailwind CSS и сохранить ее как зависимость:
npm install tailwindcss --save
Это означает, что Tailwind CSS теперь будет доступен в вашей папке node_modules и при следующем запуске npm install он автоматически загрузит Tailwind CSS в ваш проект как файл зависимость. Это простой способ управлять зависимостями проектов в разных средах, такими как локальные файлы разработки и производственный код с сервера.
Добавление Tailwind в CSS
Теперь, когда вы установили Tailwind CSS с помощью NPM вам нужно будет использовать настраиваемую директиву @tailwind и добавить стили базы, компонентов и утилит Tailwind в основной файл CSS. .
Для этого создайте новый файл CSS с именем main.css (или с любым другим предпочтительным именем) и добавьте в него следующие строки кода:
Это означает, что как только этот файл будет обработан с помощью Tailwind, он будет заменен реальными стилями CSS от Tailwind. Вы скоро увидите, что именно произойдет.
Создание файла конфигурации и обработка CSS с помощью Tailwind
Рекомендуемый способ разработки с Tailwind CSS — иметь файл конфигурации, который вы будете редактировать по ходу работы в соответствии с вашими потребностями. Вы сможете легко добавлять и изменять служебные классы по умолчанию из Tailwind. На практике будет очень легко изменить шрифты, цвета, размеры, интервалы и буквально что угодно.
Используя интерфейс командной строки Tailwind, выполните следующую команду и сгенерируйте шаблонный файл конфигурации:
npx tailwindcss init
Будет создан файл с именем tailwind.config.js имеющий следующее содержимое:
Позже в этом руководстве я покажу вам, как автоматически отслеживать изменения в вашем файле CSS, но пока вы можете просто запустить следующую команду, чтобы скомпилировать файл main.css и создать новый файл с именем output.css, который будет фактическим файлом CSS, который будет включен в файлы HTML :
npx tailwindcss build main.css -o output.css
Если вы посмотрите на структуру папок, вы увидите, что был сгенерирован новый файл output.css, который содержит все служебные классы Tailwind CSS по умолчанию на основе созданного нами файла конфигурации.
Включение Tailwind CSS в ваши HTML-шаблоны
Создайте HTML-файл с именем index.html в корневом каталоге проекта и убедитесь, что CSS-файл output.css включен в тег заголовка вашего шаблона:
Учебник Tailwind CSS от Темесберга
Поздравляем! Вы успешно настроили Tailwind CSS, используя метод, рекомендованный в официальной документации. В следующем разделе этого руководства вы узнаете, как создать раздел адаптивного героя, используя служебные классы из Tailwind CSS.
Создание адаптивного раздела с героями с использованием служебных классов из Tailwind
Теперь давайте начнем с создания раздела героев, используя классы служебной программы из Tailwind CSS. Цель состоит в том, чтобы создать панель навигации с логотипом, пунктами меню и некоторыми кнопками с призывом к действию, а затем добавить раздел с героями.
В файле index.html создайте два новых HTML-тега, которые будут оболочкой и элементом навигации страницы:
Теперь, когда вы создали базовый раздел панели навигации, вы можете начать использовать служебные классы из Tailwind CSS для настройки макета и элемента. Прежде всего, вам нужно обернуть панель навигации внутри контейнера, чтобы она была правильно выровнена с содержимым ниже.
