Этот пост был первоначально опубликован на 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 и как учесть, что ширина текста изменяет цвета градиента, и как это исправить.