Tailwind V4 CDN Demo

源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 CDN Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-brand: #165DFF;
      --color-brand-light: #4080ff;
      --color-brand-dark: #0E42D2;
      --color-success: #00B42A;
      --color-danger: #F53F3F;
      --breakpoint-xs: 360px;
      --breakpoint-3xl: 1920px;
      --font-display: "Microsoft Yahei", system-ui, sans-serif;
    }

@utility text-shadow {
      text-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    }

@utility card-gradient {
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    }

@custom-variant dark (&:where(.dark, .dark *));
  </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300 p-8 font-display">
  <div class="max-w-3xl mx-auto">
    <h1 class="text-4xl text-brand font-bold text-shadow mb-6">
      Tailwind V4 CDN 配置演示
    </h1>
    <div class="card-gradient p-6 rounded-xl text-white hover:scale-[1.02] transition-transform mb-8">
      <h2 class="text-2xl font-semibold">card-gradient 自定义工具类</h2>
      <p>CDN中使用 @theme 和 @utility</p>
    </div>
    <button id="toggleDark" class="px-5 py-2 bg-brand text-white rounded-lg hover:bg-brand-dark">
      切换暗色模式
    </button>
  </div>
  <script>
    const html = document.documentElement
    document.getElementById('toggleDark').onclick = () => {
      html.classList.toggle('dark')
    }
  </script>
</body>
</html>

运行结果