Руководство пользователя Bootstrap по началу работы с Tailwind CSS

Всем привет! ? Если вы давний пользователь Bootstrap и вам интересно перейти на Tailwind CSS, это руководство для вас. Tailwind — это CSS-фреймворк, ориентированный на утилиты, который предлагает радикально другой подход по сравнению с компонентной структурой Bootstrap. Давайте углубимся в то, как можно легко начать работу с Tailwind в качестве пользователя Bootstrap!

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

? Почему Tailwind CSS?

Прежде чем приступить к обучению, вот краткое сравнение Bootstrap и Tailwind:

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

Tailwind пригодится, когда вам нужен индивидуально настраиваемый дизайн, но он может показаться незнакомым, если вы привыкли к Bootstrap. Итак, давайте разберем это шаг за шагом.

1. Настройка попутного ветра в проекте

Шаг 1. Установите CSS Tailwind

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

• Установите Tailwind через npm:

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• В файле Tailwind.config.js настройте массив содержимого, чтобы Tailwind сканировал ваш проект на наличие классов:

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

Шаг 2. Создайте CSS-файл

Теперь создайте в своем проекте файл Styles.css со следующими директивами Tailwind:

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

Шаг 3. Включите Tailwind в свой HTML

В ваших HTML-файлах свяжите сгенерированный CSS-файл:

Теперь вы готовы начать использовать Tailwind в своем проекте!

2. Понимание философии попутного ветра

Если вы привыкли к таким классам Bootstrap, как .container, .row и .col-6, переход на Tailwind может показаться большим изменением. В Bootstrap решения по макету и дизайну абстрагируются на компоненты, а в Tailwind вы полностью контролируете дизайн с помощью служебных классов.

Пример: создание макета сетки

Бутстрап:

  

    
Column 1
    
Column 2
  

Попутный ветер:

  
Column 1
  
Column 2

В Tailwind классы Grid и Grid-cols-2 заменяют систему строк и столбцов Bootstrap. Класс Gap-4 добавляет расстояние между элементами сетки, и вы можете настроить все по мере необходимости, настроив служебные классы.

3. Типографика и интервалы с попутным ветром

Одно из основных различий между Bootstrap и Tailwind заключается в том, как обрабатываются типографика и интервалы.

Пример: добавление типографики и отступов

Бутстрап:

Hello, Bootstrap!
This is a lead paragraph.
Click Me

Попутный ветер:

Hello, Tailwind!
This is a lead paragraph.
Click Me

В Tailwind нет предопределенных стилей кнопок и заголовков. Вместо этого вы напрямую применяете служебные классы (text-4xl, bg-blue-500, px-4 и т. д.), чтобы построить свой дизайн именно так, как вы этого хотите.

4. Адаптивный дизайн

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

Пример: создание адаптивного элемента

Бутстрап:

Responsive Column

Попутный ветер:

Responsive Column

В Tailwind w-full обеспечивает, чтобы элемент занимал всю ширину на меньших экранах, а md:w-1/2 применяет ширину 50 %, начиная с точки останова md (средний размер экрана).

5. Настройка попутного ветра

Точно так же, как вы можете настроить переменные Bootstrap, вы можете расширить служебные классы Tailwind или создать свою собственную систему проектирования. В файле Tailwind.config.js вы можете расширить или изменить тему по умолчанию:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

С помощью этой конфигурации вы можете использовать свои собственные цвета следующим образом:

Custom Button

6. Миграция компонентов Bootstrap в Tailwind

Если вы хотите воссоздать общие компоненты Bootstrap (например, кнопки, панели навигации и модальные окна) в Tailwind, все дело в использовании правильных утилит. Вот несколько примеров:

Компонент кнопки

Бутстрап:

Submit

Попутный ветер:

  Submit

Компонент навигационной панели

Бутстрап:

Попутный ветер:

Изучая служебные классы Tailwind, вы сможете создавать сложные компоненты с большей гибкостью, чем готовые стили Bootstrap.

7. Использование плагинов Tailwind

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

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

В вашем Tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. Повышайте уровень с помощью Metronic 9 — универсального набора инструментов пользовательского интерфейса Tailwind

Если вы ищете CSS-интерфейс Tailwind, сочетающий в себе простоту и привычность Bootstrap, не ищите ничего, кроме Metronic 9!

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

Почему стоит выбирать Metronic 9 для своих проектов попутного ветра?

• Популярный и надежный: выпущенный еще в 2013 году, Metronic стал шаблоном панели администратора номер один на Envato Market с 115 000 продажами и 8000 5-звездочными отзывами, поддерживающими более 3000 SaaS-проектов по всему миру.

• Предварительно созданные компоненты: как и Bootstrap, Metronic 9 поставляется с сотнями готовых к использованию компонентов, таких как кнопки, панели навигации, модальные окна, формы и многое другое — все они работают на CSS-утилитах Tailwind. Это позволяет быстро создавать современные адаптивные пользовательские интерфейсы без написания собственных стилей с нуля.

• Опыт Tailwind Bootstrap: вы получаете гибкость Tailwind и структурированность Bootstrap. Независимо от того, переходите ли вы с Bootstrap или начинаете заново, кривая обучения будет минимальной.

• Несколько макетов: Благодаря более чем 5 демонстрационным макетам приложений и 1000 элементам пользовательского интерфейса Metronic 9 позволяет быстро и легко создавать сложные приложения, независимо от того, работаете ли вы над панелью управления SaaS, панелью администратора или обычным веб-приложением.

• Бесшовная интеграция: Metronic 9 прекрасно интегрируется с современными платформами, такими как React, Next.js и Angular, давая вам преимущество в путешествии по Tailwind благодаря простоте использования, подобной Bootstrap.

Начните работу с Metronic 9 сегодня!

Если вы переходите с Bootstrap и хотите, чтобы с Tailwind работала знакомая, многофункциональная среда, Metronic 9 — идеальное решение. Он разработан, чтобы сэкономить ваше время и усилия, позволяя вам сосредоточиться на создании отличных продуктов, не увязая в деталях дизайна.

? Ознакомьтесь с Metronic 9 здесь и начните создавать красивые пользовательские интерфейсы, используя гибкость Tailwind и простоту Bootstrap!

9. Заключение: подходит ли вам Tailwind?

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

Не стесняйтесь задавать любые вопросы или делиться своим опытом в комментариях ниже. Приятного кодирования! ?