如何在TailwindCSS中渲染内联SVG元素？

我之前也碰到过和你一模一样的问题！当时我在Tailwind配置里定义了一个用内联SVG做的背景图，结果用@apply调用的时候直接编译失败了，折腾了好一会儿才找到解决办法，跟你说说具体情况和可行的方案吧。

先说说我当时的操作：我在tailwind.config.ts里定义了一个名叫hero的背景图，用的是内联SVG的Data URL，代码是这样的：

backgroundImage: {
        hero: `url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E')`,
},

之后我想在global.css里通过@apply把这个背景图加到伪元素上，就写了这段代码：

.fill-grain {
    @apply before:bg-hero;
}

结果直接弹出“Failed to compile”的错误提示，当时头都大了。

后来查了资料试了几种方法，都能解决问题，你可以挨个试试：

方法一：修正Data URL的转义问题 #

问题大概率出在SVG内容里的单引号和外层的单引号冲突了，Tailwind解析的时候出错了。你可以把外层的单引号换成双引号，或者把SVG里的单引号转义成'。

比如换成双引号包裹URL：

backgroundImage: {
  hero: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E")`,
},

或者转义SVG里的单引号：

backgroundImage: {
  hero: `url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E')`,
},

方法二：给伪元素加上必要的尺寸和定位 #

伪元素默认是没有内容和尺寸的，就算你加上背景图也看不到，而且可能导致编译时的隐性错误。你可以给父元素加相对定位，然后给伪元素设置绝对定位和宽高：

.fill-grain {
  @apply relative;
}
.fill-grain::before {
  content: "";
  @apply absolute inset-0 bg-hero;
}

或者直接用Tailwind的类来写，更简洁：

.fill-grain {
  @apply relative before:content-[''] before:absolute before:inset-0 before:bg-hero;
}

方法三：直接在Tailwind插件里定义工具类 #

如果上面的方法都不行，你可以试试直接在Tailwind的插件里定义这个工具类，绕过@apply的解析问题：
在tailwind.config.ts的plugins数组里添加：

plugins: [
  function({ addUtilities }) {
    addUtilities({
      '.fill-grain': {
        position: 'relative',
        '&::before': {
          content: '""',
          position: 'absolute',
          inset: '0',
          backgroundImage: `url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E')`,
        }
      }
    })
  }
]

这样你直接在HTML元素上用class="fill-grain"就能生效了，不用再写global.css里的代码。

备注：内容来源于stack exchange，提问作者Mehdi Faraji