Как сделать градиентный текст с помощью Tailwind CSS

Этот пост был первоначально опубликован на Red Pixel Themes.


В Tailwind CSS v3 градиентный текст стал намного проще, вот как это сделать.

Шаг 1: Добавьте стили градиента

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400">
    hello world
</h1>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Вот официальная документация по работе с градиентами в Tailwind, но чтобы разбить ее на части:

Вы можете изменить эти значения в соответствии с вашими потребностями, но это наиболее распространенная структура для работы с градиентами в Tailwind CSS

Необязательно, но рекомендуется

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

Это вызовет проблему, когда у вас будет готовый код градиентного текста. Когда вы измените размер окна, цвета градиента в тексте изменятся.

Это происходит потому, что созданный нами градиент занимает всю ширину элемента, а не ширину текста.

Чтобы исправить это, достаточно добавить класс inline-block к нашему элементу.

<h1 class="... inline-block">
    hello world
</h1>
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь градиент занимает только ширину текста, а не ширину родительского элемента.

Проблема решена! Теперь перейдем к следующему шагу.

Шаг 2: Сделайте текст прозрачным

Сделайте текст прозрачным с помощью класса text-transparent.

<h1 class="... text-transparent">
    hello world
</h1>
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Текст исчезнет, но не волнуйтесь, мы исправим это в следующем шаге.

Шаг 3: Обрежьте текст на фон

Это самое важное для создания градиентного текста, оно использует CSS свойство background-clip, которое имеет несколько значений, и одно из них text, чтобы использовать это конкретное свойство и значение в Tailwind CSS, нам просто нужно добавить класс bg-clip-text.

<h1 class="... bg-clip-text">
    hello world
</h1>
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все! Теперь у нас есть наш градиентный текст 🥳.

Сложив все это вместе, вы получите этот фрагмент:

<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">hello world</h1>
Войти в полноэкранный режим Выход из полноэкранного режима

Вот ссылка на Tailwind Play, если вы хотите поиграть с ним.


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

Оцените статью
devanswers.ru
Добавить комментарий