Применение теней текста в CSS Tailwind

Тень текста попутного ветра — это английская фраза. В Tailwind CSS вы можете применять тени текста к элементам с помощью служебных классов. Вот несколько методов создания теней текста в Tailwind CSS:

  1. Использование служебных классов по умолчанию:

    <h1 class="text-shadow">Hello, Tailwind!</h1>

    В вашем CSS-файле или конфигурации Tailwind вы можете определить цвет тени и другие свойства:

    .text-shadow {
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  2. Настройка утилит тени текста:
    Вы можете использовать конфигурацию темы textShadowв файле конфигурации Tailwind для определения пользовательских утилит тени текста:

    // tailwind.config.js
    module.exports = {
     theme: {
       extend: {
         textShadow: {
           'default': '2px 2px 4px rgba(0, 0, 0, 0.5)',
         },
       },
     },
     variants: {},
     plugins: [],
    }

    При приведенной выше конфигурации вы можете использовать классы text-shadow-{variantв своем HTML:

    <h1 class="text-shadow-default">Hello, Tailwind!</h1>
  3. Встроенные стили.
    Если вы предпочитаете встроенные стили, вы можете напрямую использовать свойство shadow:

    <h1 >Hello, Tailwind!</h1>