[tailwind] 原子类中使用css变量

准备

在Vue工程中随便创建一个css文件, 命名可以为var.css, 内容如下, 记得被main.js import

:root {
    --main-color: hotpink;
}

使用

方法1: bg-[变量名]

<div class="bg-[--main-color] w-32 h-32 "></div>

<div class="bg-[--main-color] w-32 h-32 "></div>

方法二

在 tailwind.config.js 文件中，可以通过扩展 theme 来使用 :root 中的变量：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        'main': 'var(--main-color)',  // 使用 :root 中的变量
      },
    },
  },
}

然后，在 HTML 或模板中，你就可以像使用其他 Tailwind 颜色一样使用 main：

<div class="bg-main text-white">
  这是一个使用自定义颜色的元素。
</div>

这种方式能够将 --main-color 作为 Tailwind 的颜色系统的一部分来使用