如何从React的@apply方式切换为纯HTML+Tailwind CDN使用Tailwind CSS

步骤1：在HTML中引入Tailwind CDN #

在HTML的<head>标签内添加Tailwind官方CDN链接，同时可按需配置自定义主题（对应你之前React项目里的Tailwind配置）：

<head>
  <!-- 引入Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 可选：配置自定义主题（颜色、字体、间距等） -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#你的自定义主色值',
            secondary: '#你的自定义次色值',
          },
          fontFamily: {
            custom: ['你的自定义字体', 'sans-serif'],
          },
        },
      }
    }
  </script>
</head>

步骤2：替换@apply封装的自定义类 #

CDN环境不支持普通CSS文件里的@apply指令，需按两种方式迁移：

• 直接内联Tailwind工具类：把之前用@apply封装的自定义类拆解成原始Tailwind工具类，直接添加到HTML元素的class属性中。比如原来React里用<div className="card">，现在改成<div class="shadow-md p-4 rounded-lg border border-gray-200">
• 复用样式用@layer定义：如果需要复用样式，可在<style type="text/tailwindcss">标签内用@layer声明组件类，内部可使用@apply：

  <style type="text/tailwindcss">
    @layer components {
      .card {
        @apply shadow-md p-4 rounded-lg border border-gray-200;
      }
      .btn-primary {
        @apply px-4 py-2 bg-primary text-white rounded hover:bg-opacity-90;
      }
    }
  </style>
  

  注意：必须使用type="text/tailwindcss"的<style>标签，否则@layer和@apply不会生效。

步骤3：迁移原有页面结构与样式 #

对照你之前React项目里的样式截图，逐一将自定义类替换为对应的Tailwind工具类或上述@layer声明的复用类，确保HTML元素的class属性包含所有所需样式类。

关键注意事项 #

• CDN版本不支持单独的tailwind.config.js配置文件，所有主题自定义必须通过<script>里的tailwind.config对象完成
• 避免在普通<style>标签内使用@apply，仅在type="text/tailwindcss"的<style>标签内的@layer块中支持
• 尽量保持CDN版本与你之前React项目使用的Tailwind版本一致，避免因版本差异导致类名不兼容

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