Опубликовано: понедельник, 1 января 2024 г. в 08:43

6 лучших практик, советов и приёмов Tailwind CSS на 2024 год

Источник: «6 Tailwind CSS best practices, tips, and tricks for 2024»

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

Введение в лучшие практики, советы и приёмы Tailwind CSS
Расширяйте Tailwind CSS с помощью файла конфигурации, а не пользовательского CSS
Для эффективной работы с Tailwind CSS используйте плагины Visual Studio Code
- Tailwind CSS IntelliSense
- Inline Fold
Используйте перенос строки
Извлекайте в компонент
Не извлекайте в родительский класс. Используйте возможности редактора и языка.

Введение в лучшие практики, советы и приёмы Tailwind CSS

Tailwind CSS — это мой основной CSS-фреймворк с 2018 года. С тех пор я не использую ничего другого, серьёзно!

Поэтому думаю, что имею все шансы научить кое-чему тех, кто также влюбился в него.

Расширяйте Tailwind CSS с помощью файла конфигурации, а не пользовательского CSS

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

Например, если требуется добавить новый цвет, вы можете расширить стандартную тему и добавить собственный набор значений:

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            colors: {
                brand: '#abc123',
            },

            fontFamily: {
                handwriting: ['Some handwriting font'],
            }
        }
    }
}

При правильном использовании файла конфигурации будут автоматически сгенерированы классы и их варианты, такие как bg-brand, text-brand, border-brand, hover:bg-brand и т. д.

Более подробную информацию можно найти в официальной документации.

Для эффективной работы с Tailwind CSS используйте плагины Visual Studio Code

Tailwind CSS IntelliSense

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

Tailwind CSS IntelliSense в расширениях Visual Studio Code.

Inline Fold

Если вы чувствуете раздражение от большого количества классов в вашем HTML, вы можете свернуть атрибут class для большей ясности.

Inline Fold — это плагин для Visual Studio Code, отлично решающий эту проблему.

Inline Fold в расширениях Visual Studio Code.

Используйте перенос строки

Допустим, у вас есть button, который выглядит следующим образом:

<button class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500 to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6 py-2 rounded shadow-lg text-sm text-white w-full">
    Click me
</button>

Один из простых приёмов, позволяющих сделать текст более читабельным, — разбить атрибут class на несколько строк:

<button
    class="bg-gradient-to-r from-indigo-300 dark:from-indigo-500
    to-indigo-400 dark:to-indigo-600 font-semibold px-4 sm:px-6
    py-2 rounded shadow-lg text-sm text-white w-full"
>
    Click me
</button>

Извлекайте в компонент

Извлечение кнопки в компонент (Blade, React, Vue или любой другой) значительно очистит ваши файлы.

Вот файл шаблона Blade, использующий компонент button и содержащий тот же код, что и выше:

<!DOCTYPE html>
<html>
    <head>
        …
    </head>
    <body>
        …

        <x-button>
            Book me
        </x-button>

        …
    </body>
</html>

Не извлекайте в родительский класс. Используйте возможности редактора и языка.

Извлечение множества классов Tailwind CSS в родительский класс — это заманчиво.

.btn {
    @apply bg-gradient-to-r from-blue-400 to-blue-300 px-4 py-3 rounded
}

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

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

Вот пример, написанный с использованием шаблонизатора Blade от Laravel:

{{-- Somewhere in your views… --}}
<x-primary-btn>
    Click me
</x-primary-btn>

{{-- primary-btn.blade.php --}}
<x-btn class="bg-gradient-to-r from-blue-400 to-blue-300 text-white">
    {{ $slot }}
</x-btn>

{{-- btn.blade.php --}}
<button {{ $attributes->merge(['class' => 'bg-gray-200 px-4 py-3 rounded']) }}>
    {{ $slot }}
</button>

Мы начнём с базового компонента btn с серой закруглённой кнопкой, которой достаточно для большинства случаев.
Затем у нас есть компонент primary-btn, расширяющий компонент btn и добавляющий синий градиентный фон и белый текст. Этот компонент можно использовать для кнопок "призыва к действию".