ExtJS and Tailwind CSS

За последние несколько месяцев я использовал Tailwind для некоторых проектов, не связанных с ExtJS. Tailwind — это фреймворк, сильно отличающийся от Bootstrap или подобных продуктов. Фактически, он использует подход «utility-first» (полезность прежде всего), где классы CSS связаны с функциональными возможностями, а не с компонентами. Основной его плюс в том, что при разработке приложения вам не нужно иметь дело с CSS и беспокоиться о том, как переопределить 20 селекторов, которые вы писали 2 года назад.

Читать далее: ExtJS and Tailwind CSS

Как работает Tailwind CSS

Чтобы попытаться немного прояснить концепцию, я воспользуюсь тем же примером с официального сайта. Давайте рассмотрим этот компонент:

Без Tailwind, нам пришлось бы использовать такой код:

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>
<style>
  .chat-notification {
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Однако с Tailwind колличество кода сократиться до:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Целью этой статьи не является вдаваться в подробности работы Tailwind, но даже на первый взгляд мы видим разницу в размере кода, а также ряд «странны» CSS-классов.

Лично я привык давать классам имена, которые помогают мне понять их значение (кнопка, карточка, ячейка, столбец, …), и это, безусловно, облегчает чтение HTML-кода. В некотором смысле, это похоже на добавление комментариев к коду. Вместо этого, с Tailwind, классы ссылаются на один конкретный аспект, назначаемый HTML-тегам. Но для каждого тега часто необходимо вставить более одного класса, что делает подобный подход особенно сложным.

Большим преимуществом является то, что вы практически больше не пишете CSS и используете классы Tailwind. Таким образом, помимо того, что вы не тратите время на придумывание имен классов, часто даже странных (item-inner-column-wrapper и т. д.), вы используете соглашения, которые помогают быть CSS в вашем приложении более однородным.

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

Tailwind и ExtJS

В процессе разработки на ExtJS я заметил, что пишу сложные шаблоны с классами CSS и множеством стилей, и я понял, что скучаю по Tailwind. Давайте рассмотрим пример:

items: [{
  xtype: 'list',
  itemTpl: 
    '<div class="list-item">' +
      '<div class="item-icon {iconCls}"></div>' +
      '<div class="list-item-data">' +
        '<div class="list-item-name">{name}</div>' +
        '<div class="list-item-detail">{detail}</div>' +
      '</div>' +
    '</div>'
}]

.list-item {
  display: flex; 
  align-items: center;
  padding: 4px;
}

.list-item-data {
  display: flex; 
  flex-direction: column;
}

.list-item-name {
  font-size: 18px;
}

.list-item-detail {
  font-style: italic;
}

С Tailwind достаточно следующего кода, даже не без CSS:

items: [{
  xtype: 'list',
  itemTpl: 
    '<div class="flex items-center p-1">' +
      '<div class="item-icon {iconCls}"></div>' +
      '<div class="flex flex-col">' +
        '<div class="text-lg">{name}</div>' +
        '<div class="italic">{detail}</div>' +
      '</div>' +
    '</div>'
}]

Конфигурирование и установка

Использовать Tailwind с ExtJS довольно просто, потому что в конечном итоге движок сканирует весь наш код в поисках классов Tailwind (flex, grid, text-lg, p-1, p-2 и т. д.) и генерирует CSS-файл, содержащий только те классы, которые вы использовали. Если вы используете Open Tooling на основе npm, вы можете следовать руководству по установке Tailwind. В противном случае, если вы используете SenchaCmd, самое простое, что можно сделать, это загрузить CLI отсюда.

Установив этот CLI, вы можете инициализировать Tailwind, перейдя в корневой каталог вашего проекта и написав:

# Create a tailwind.config.js file
./tailwindcss init

Это создаст файл tailwind.config.js. Я изменил его следующим образом, но, конечно, это зависит от вашего приложения:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./app/**/*.{html,js}','./index.html'],
    // Remove all corePlugins
    corePlugins: {
      preflight: false,
    },
    // Remove all preset
    //presets: [],
    theme: {
        extend: {
          boxShadow: {
            'outline': '2px 2px 8px 0 rgba(0, 0, 0, 0.4)',
          }
        },
    },
    plugins: [],
};

Опция content является самой важной, в ней вы должны определить каталоги, которые Tailwind будет сканировать для поиска классов CSS. С помощью конфигурации corePlugins и plugins я удалил все плагины, чтобы сгенерировать минимальный CSS. Так же, я добавил свойство в theme, чтобы сгенерировать новый класс shadow-outline с нужным значением. Если хотите, вы можете удалить стандартные пресеты (presets), но тогда некоторые классы не будут работать.

Затем мы используем CLI для генерации классов:

tailwindcss -o sass\src\tailwind.css --watch

С помощью этой команды Tailwind будет постоянно проверять файлы, указанные в конфигурации, и генерировать классы в файле sass\src\tailwind.css. Наконец, нам нужно указать ExtJS использовать этот файл CSS. Нам нужно изменить конфигурацию приложения в разделе scss файла манифесте приложения app.json:

"sass": {
  ...
  "src": [
    "sass/src",
    "sass/src/tailwind.css"
  ]
  ...
}

При желании вы можете автоматизировать создание CSS во время production сборки, добавив следующий код в файл build.xml:

<target name="-before-build">
  <if>
    <equals arg1="production" arg2="${build.environment}"/>
  <then>
    <x-echo message="Build CSS with Tailwind"/>
    <exec executable="tailwindcss">
      <arg value="-o"/>
      <arg value="sass\src\tailwind.css"/>
    </exec>
  </then>
  </if>
</target>