Question

我正在使用尾窗。在我的<代码>全球cs上, 我有以下定义:

@layer base{
   --primary: 256, 92%, 63%, 1;
   --primary-foreground: 210 40% 98%;
}

在我的<代码>尾窗.config.js中,我有这一配置:

extend: {
   colors: {
     primary: {
          DEFAULT:  hsl(var(--primary)) ,
          foreground:  hsl(var(--primary-foreground)) ,
        },
   }
}

因此,我可以在我的构成部分中使用:

<div className="min-h-[380px] rounded-2xl border-2 border-dashed border-primary/75">
...
</div>

然而,产出实际上有所不同,与初等产出相比,产出并不相同,不太透明,而是看上去更白人。然而,如果我只用黑色的黑体表示,它就行了:

<div className="min-h-[380px] rounded-2xl border-2 border-dashed border-[#784AF7]/75">
...
</div>

我不敢肯定为什么情况如此,但我认为我不理解何等工作。

如果这一职位在其他地方得到答复,那么我觉得可以自由提供,因为我没有真正找到与我的问题相近的东西。

Answer 1

I don t think tailwind is relevant here. Your --primary is not even remotely the same as your --primary-foreground

在HSL(住所、涡轮机和光灯)中,如果你想要一个灯光的彩色,你就只能提高你的土地价值。然而,你似乎想要减少不透明,因此,你只是把阿法价值作为第四参数(见四部分)。虽然我只建议提高升值,但如果你控制实际彩色,而代谢价值则比较(见第五编)。

:root {
  --primary: 256, 92%, 63%, 1;
  --primary-foreground: 210 40% 98%;
  --reduced-op: 256, 92%, 63%, 0.75;
  --increased-light: 256, 92%, 75%, 1;
}

.blocks {
  display: flex;
  gap: 1rem;
}

[class*="block-"] {
  height: 5rem;
  width: 5rem;
  background-color: hotpink;
}

.block-1 {
  background-color: hsl(var(--primary));
}

.block-2 {
  background-color: hsl(var(--primary-foreground));
}

.block-3 {
  background-color: #784AF7;
}

.block-4 {
  background-color: hsl(var(--reduced-op));
}

.block-5 {
  background-color: hsl(var(--increased-light));
}

<section class="blocks">
  <div class="block-1"></div>
  <div class="block-2"></div>
  <div class="block-3"></div>
  <div class="block-4"></div>
  <div class="block-5"></div>
</section>

友情链接