使用Tailwind CSS CDN时文本颜色不生效的问题求助

你的代码逻辑本身是正确的，text-green-500类理应让h1文本显示为绿色。出现黑色的情况可以按以下步骤排查解决：

• 强制刷新清除缓存：浏览器可能缓存了旧的页面资源，按下Ctrl + F5（Windows）或Cmd + Shift + R（Mac）强制刷新页面，重新加载Tailwind CDN资源。
• 检查CDN加载状态：打开浏览器开发者工具（F12），切换到「网络」面板，刷新页面后查看https://cdn.tailwindcss.com的请求状态，确保请求返回200（成功），如果加载失败会在控制台显示错误信息。
• 验证类名拼写：确认text-green-500没有拼写错误，比如少写字母、多余空格等，你的代码里类名是正确的，但可以再仔细核对一遍。
• 排查样式冲突：暂时移除<head>里自定义的<style>标签内容，测试简化后的代码是否正常生效。如果生效，再逐步加回自定义样式，排查是否存在样式覆盖的情况。

简化测试代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Colors</title>
  </head>
  <body>
    <h1 class="text-green-500">1.Color With Different Shades</h1>
    <p>TailWind</p>
  </body>
</html>

一般来说，缓存问题是最常见的原因，强制刷新后就能正常显示绿色文本了。

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