为什么大括号替换在tailwindcss中不起作用？

u4dcyp6a 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(192)

我试图创建一个苗条的组成部分，其颜色是一个变量。但在最终渲染时，虽然组件具有类名，但颜色不会渲染。为什么会发生这种情况，以及如何解决这个问题。

<script lang="ts">
    export let color: string;
</script>

<div id="solus" class="absolute overflow-hidden bg-{color}-600 h-96 w-96 rounded-full blur-3xl" />

我试着交换花括号并编写if-else语句，但这是低效的，我需要它来渲染我选择的任何颜色。

css

来源：https://stackoverflow.com/questions/76513554/why-is-the-curly-braces-substitution-not-working-with-tailwindcss-here

1条答案

按热度按时间

ezykj2lf1#

我看到了关于背景颜色的任意值，你只需要在两个方括号之间添加颜色。

<div class="bg-[#50d71e]">
  <!-- ... -->
</div>

对于您的情况，您需要执行字符串插值。你的代码应该是这样的：

<script lang="ts">
  export let CUSTOM_BG_COLOR: string;
</script>
...

<div class={`bg-[${CUSTOM_BG_COLOR}]`}>
  <!-- Content -->
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

为什么大括号替换在tailwindcss中不起作用？

1条答案

相关问题

热门标签

最新问答