如何使用Tailwind CSS修改a标签内元素的颜色

带href的<a>标签默认被浏览器施加蓝色链接样式，内部元素会继承该颜色，直接通过Tailwind的文字颜色类即可覆盖默认样式，不需要额外写自定义CSS。

• 最简便的写法：直接在<a>标签的class属性中添加目标颜色的text-*类，内部的Font Awesome图标、文本都会自动继承该颜色，无需单独给子元素加样式。
  比如需要白色文字/图标，就添加text-white，需要浅灰色就添加text-gray-300，如果需要交互状态变色，直接加带状态前缀的类即可，比如hover:text-blue-500实现鼠标悬浮变蓝。
  修改后的示例代码：

<a
  class="bg-dark-150 text-white hover:text-blue-500 no-underline"
  href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
  onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
  title="Share on Facebook"
>
  <i class="fa fa-facebook-official share-button"> facebook</i>
</a>

上面代码里额外加了no-underline清除a标签默认下划线，如果需要悬浮显示下划线，替换成hover:underline即可。

• 如果需要图标和文本显示不同颜色，直接给内部的<i>标签单独加text-*类设置颜色即可，该样式优先级高于父a标签继承的颜色。
  示例（文本为浅灰色，Facebook图标为品牌蓝色）：

<a
  class="bg-dark-150 text-gray-200 no-underline"
  href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
  onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"
  title="Share on Facebook"
>
  <i class="fa fa-facebook-official share-button text-blue-600"> facebook</i>
</a>

如果添加颜色类后没有生效，检查是否有自定义CSS（比如你写的.share-button相关样式）设置了更高优先级的颜色规则，调整优先级或者直接给对应元素加Tailwind颜色类覆盖即可。

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