В этой статье блога мы рассмотрим различные методы создания горизонтальных линий с текстом в Tailwind CSS. Хотите ли вы разделить разделы своего веб-сайта или добавить визуальную иерархию к своему контенту, эти методы помогут вам добиться чистого и профессионального вида. Итак, приступим!

Метод 1: использование утилиты border-t
Tailwind CSS предоставляет служебный класс border-t, который позволяет добавлять горизонтальную линию над элементом. Вы можете комбинировать этот класс с другими служебными классами, чтобы стилизовать линию и добавить текст между ними. Вот пример:

<div class="border-t border-gray-300">
  <span class="bg-white px-3">Your Text Here</span>
</div>

Метод 2: использование элемента hr
Если вы предпочитаете использовать элемент HTML <hr>, вы можете использовать служебные классы CSS Tailwind для его стилизации и добавления текста в него. между. Вот пример:

<hr class="border-gray-300">
<p class="bg-white px-3">Your Text Here</p>
<hr class="border-gray-300">

Метод 3: создание пользовательской горизонтальной линии
Если вам нужен больший контроль над стилем горизонтальной линии, вы можете создать собственный класс в конфигурации CSS Tailwind. Вот пример:

/* tailwind.config.css */
module.exports = {
  theme: {
    extend: {
      borderWidth: {
        '3': '3px',
      },
      colors: {
        'line': '#e2e8f0',
      },
    },
  },
  variants: {},
  plugins: [],
};

<hr class="border-line border-3">
<p class="bg-white px-3">Your Text Here</p>
<hr class="border-line border-3">

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