文本透明实用程序类不适用于 TailwindCSS

Question

我正在尝试使用 this 指南将渐变应用于某些文本。一切都在进行中，直到尝试使文本透明以允许渐变通过。这就是我最终得到的结果：

文字边缘显示渐变，但实际文字仍然是黑色。以下是正在应用的样式类：

<body class="w-screen h-screen bg-bg font-poppins">                            
  <main class="w-full h-full">                                                 
    <div class="sticky top-0 left-0 w-full bg-bg">                                   
      <h1 class="text-transparent bg-gradient-to-r from-blue via-cyan to-purple inline-block text-4xl p-4 bg-clip-text">Lorem Ipsum</h1>                     
      <hr />                                                                       
    </div>                                                             
  </main>                                                                      
</body>

我尝试了

text-transparent

、

text-opacity-0

和

text-slate-400/0

- 它们都不起作用。我是否错误地应用了这个实用程序类？我正在使用 Laravel 和 Blade 模板渲染页面，并且正在更改之间构建 css 资源。

Answer 1

在 Tailwind CSS 中启用

bg-clip-text：您可能需要在 tailwind.config.js 文件中显式启用实用程序。以下是检查 backgroundClip 是否已启用的方法：

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      backgroundClip: ['text']
    }
  }
}

text-transparent类被正确应用并且没有被其他规则覆盖。它应该有效地设置颜色：透明;。

CSS 属性

background-clip: text 因兼容性问题而臭名昭著，尤其是对于某些版本的浏览器。

.gradient-text {
    background: linear-gradient(to right, blue, cyan, purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

<body class="w-screen h-screen bg-bg font-poppins">
  <main class="w-full h-full">
    <div class="sticky top-0 left-0 w-full bg-bg">
      <h1 class="gradient-text inline-block text-4xl p-4">Lorem Ipsum</h1>
      <hr />
    </div>
  </main>
</body>

清除缓存

文本透明实用程序类不适用于 TailwindCSS

问题描述投票：0回答：1

1个回答

最新问题

文本透明实用程序类不适用于 TailwindCSS

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1