Классы Tailwind в элементе svg содержимого не применяются при использовании через url()

Классы попутного ветра игнорируются, когда я пытаюсь загрузить svg через before:content-gear, который использует url(). Как заставить его работать?

Конфигурация попутного ветра:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/index.html", "./icons/*.svg"],
  theme: {
    extend: {
      colors: {
        'bento-main': '#ff7a90',
        'bento-bg': '#2d394d',
        'bento-sub': '#4a768d',
        'bento-sub-alt': '#263041',
        'bento-text': '#fffaf8',

      },
      content: {
        'gear': 'url("/icons/gear.svg")',
      }

    },
  },
  plugins: [],
}

индекс html:

<!doctype html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link href = "/dist/output.css" rel = "stylesheet">
</head>
<body class = "bg-bento-bg box-border ">
      <div class = "bg-bento-sub-alt rounded absolute  top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4">
        <h1 class = " font-semibold text-bento-sub py-3 pl-4 pr-2
        before:content-gear">
          Process <span class = "text-bento-main">Mining</span>
        </h1>
      </div>
</body>
</html>`

шестерня.svg

        <svg       
        class = "h-6 w-6 text-indigo-500 !important"
        xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
          <path strokeLinecap = "round" strokeLinejoin = "round" d = "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
          <path strokeLinecap = "round" strokeLinejoin = "round" d = "M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>

Я скопировал элемент svg в тело index.html, чтобы проверить, работает ли он без загрузки файла svg через url(), и он работает. Я добавил .svg в конфигурацию попутного ветра, чтобы убедиться, что он создает для него выходные данные, но я не вижу ничего, кроме URL (..) в выходном каталоге.

html css svg tailwind-css

13.04.2023 22:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

109

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете этого сделать, поскольку классы, которые вы добавляете в svg, не имеют ничего общего с документом, в котором вы находитесь. Если только вы не объявите его в том же html. Как вы указали, вы загружаете ресурс из другого места, классы никогда не будут взаимодействовать таким образом.

Вот как это сделать: https://play.tailwindcss.com/rGjdDPKfnG

13.04.2023 23:48

Другие вопросы по теме

Вогнутый прямоугольник с прозрачным градиентом

Горизонтальное выравнивание двух изображений

ReactJS, если еще дает false

Как заставить блок занять всю оставшуюся высоту экрана

В Nav нужно закрыть все остальные выпадающие списки, которые открыты, при открытии другого

Как расположить мои h1(меня зовут..) и <p>( A ср...) рядом с моим изображением, справа от изображения

Селектор CSS $parent > $child выбирает все дочерние элементы <li> во вложенных списках

Кнопка с абсолютным позиционированием не ведет себя как другие абсолютно позиционированные элементы на странице

ReactJS, как отображать компонент при изменении значения

Как удалить этот фон изображения в nextjs

Классы Tailwind в элементе svg содержимого не применяются при использовании через url()

Ответы 1

Другие вопросы по теме

Похожие вопросы