TailwindCSS自定义主题变量

theme中配置-官方推荐

在根css文件里添加@theme，在其中添加变量

@import "tailwindcss";@theme {  /* 颜色的定义 */
  --color-primary: #1677FF;
}

使用：直接border-primary即可

<div className="border border-primary text-primary">测试文字</div>;

<p><span style="color: rgb(255, 255, 255);">www.imooc.com</span></p>

具体的规则如下：
--color-*: xxx; 表示定义的--color，*则是你的自定义名称，之后是变量具体值。
比如：--color-my-color: cyan;
你定义了一个 my-color的变量，颜色为cyan，页面使用：

className="text-my-color"