如何在Quasar中设置文本为primary颜色？两种尝试均失败

你的两种写法无效的原因：

1. <p color="primary">：原生HTML的<p>标签不存在color属性，这种写法不符合HTML规范。
2. <p style="color: primary">：primary不是CSS原生支持的颜色值，CSS仅识别十六进制、RGB/RGBA、HSL/HSLA格式，或者red、blue这类预定义颜色名。

根据不同场景，有几种可行的解决方法：

1. 使用CSS框架的预设工具类 #

如果你的项目基于Bootstrap、Tailwind这类前端框架，它们通常预设了text-primary这类工具类，直接给标签添加即可：

<p class="text-primary">foo</p>

2. 自定义CSS变量 #

先在全局样式中定义--primary变量，再通过内联样式引用：

/* 全局样式（可写在<style>标签或独立CSS文件中） */
:root {
  --primary: #0d6efd; /* 替换为你需要的primary色值，比如Bootstrap默认的主题蓝 */
}

使用方式：

<p style="color: var(--primary)">foo</p>

3. 自定义CSS类 #

自己编写一个CSS类，给目标标签添加该类：

/* 全局样式 */
.text-primary {
  color: #0d6efd; /* 替换为你的primary色值 */
}

使用方式：

<p class="text-primary">foo</p>

4. 直接使用具体色值 #

如果不想用变量或类，也可以直接在style中写入primary对应的具体颜色值：

<p style="color: #0d6efd">foo</p>
<!-- 也可以用RGB/RGBA格式 -->
<p style="color: rgb(13, 110, 253)">foo</p>

内容的提问来源于stack exchange，提问作者quant