next.js 具有Tailwind变体的自定义CSS类

csbfibhn  于 2023-03-02  发布在  其他
关注(0)|答案(1)|浏览(152)

我从一个网站上注意到存在一个类bordershadow。现在这个类没有列在Tailwind类中。
这个类的一个独特之处是,它可以有各种各样的变量,并且它似乎接受一个颜色类。例如bordershadow-red-500。颜色变量似乎改变了某种颜色。
例如,假设我们有bordershadow-red-500,其CSS定义为:

.bordershadow-red-500 {
    box-shadow: var(--colors-custom-1) 0 0 0 0, var(--colors-custom-1) 0 0 0 0,
      var(--colors-custom-8) 0 1px 1px 0, RED_500_COLOR_INSERTED_HERE 0 0 0 1px, var(--colors-custom-1) 0 0 0 0,
      var(--colors-custom-1) 0 0 0 0, rgb(64 68 82/8%) 0 2px 5px 0;
  }

它可以接受hover:bordershadow-green-500等变量
它的名字是什么,你怎么定义这样的类。

l7wslrjt

l7wslrjt1#

有几种方法可以实现这一点。
1.使用tailwind shadow-{color}属性:https://play.tailwindcss.com/LM3zcjX0pb
1.如果你需要设置自定义阴影,扩展你的主题.并且将仍然与阴影颜色工具一起工作. https://play.tailwindcss.com/Z9B9USNE0B?file=config
如果这不是你想要的,请用一个工作示例来改进你的问题。

相关问题