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

Почему нужно настраивать Tailwind?

По умолчанию Tailwind предоставляет широкий спектр разнообразных классов-утилит, но иногда хочется выйти за рамки “стоковых” настроек. У разработчика есть возможность добавлять собственные цвета, шрифты, значения интервалов и даже контрольные точки - это позволяет рассматривать Tailwind в качестве идеального инструмента для создания собственной дизайн-системы.

Например, у дизайнера может появиться желание использовать в проекте фирменный цвет или пользовательский шрифт. Tailwind позволяет без труда настроить эти параметры в файле конфигурации tailwind.config.js.

Настройка файла конфигурации Tailwind

После установки Tailwind через npm можно создать файл конфигурации, выполнив команду:

npx tailwindcss init

В результате появится файл tailwind.config.js, в котором для текущего проекта задаются настройки Tailwind по умолчанию.

Пример:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#5A67D8',
      },
      fontFamily: {
        custom: ['Open Sans', 'sans-serif'],
      },
    },
  },
}

Так добавляются:

1. пользовательский цвет: brand
2. пользовательское семейство шрифтов custom.

Персонализация цветов и интервалов

В соответствии с потребностями проекта Tailwind позволяет определять пользовательские цвета и интервалы. Можно расширить палитру по умолчанию или полностью заменить её.

Пример создания пользовательских цветов:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#A78BFA',
      },
    },
  },
}

Теперь эти цвета применимы для HTML:

<div class="bg-primary text-white">Custom Background</div>

Пример создания пользовательских интервалов:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
}

Новые значения интервалов используются следующим образом:

<div class="mt-72">Extra Margin</div>

Персонализация контрольных точек

Если адаптивные контрольные точки по умолчанию не соответствуют требованиям проекта, их можно изменить или добавить новые контрольные точки.

Пример:

module.exports = {
theme: {
screens: {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px',
    '3xl': '1920px', // Adding a custom breakpoint
},
},
}

После этого можно создавать стили в новой 3xl контрольной точке.

Удаление неиспользуемого CSS

Tailwind генерирует большое количество стилей, но размер рабочего CSS-файла можно значительно уменьшить, удалив неиспользуемые стили. В Tailwind есть встроенная опция очистки, удаляющая неиспользуемые классы из конечного CSS-файла.

Настройка очистки:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.js'],
}

Теперь в рабочую сборку попадут только те классы CSS, которые используются в файлах HTML и JavaScript, что значительно уменьшает размер конечного файла CSS.

Заключение

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

Спасибо за внимание.