使用CDN引入TailwindCSS时，@apply指令能否用于外部CSS文件？

我通过CDN引入TailwindCSS开发一个仅含少量页面的基础项目，其中有多个UI样式相同的组件。我用<script src="https://cdn.tailwindcss.com"></script>加载TailwindCSS，在HTML文件内的<style type="text/tailwindcss">标签中使用@apply指令是有效的，示例代码如下：

<style type="text/tailwindcss">
    .package {
        @apply
        w-72
        p-5
        bg-white
        rounded-xl
        border
        drop-shadow-2xl
    }
</style>

但我希望将.package类的定义移至外部加载的main.css文件中，所有文件均为纯CSS和HTML，请问是否可以实现这种用法？

附完整HTML示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple Plan</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="tailwind.config.js"></script>
    <link rel="stylesheet" href="assets/css/main.css">
    <!-- 我想把下面这段代码移到main.css文件中 -->
    <style type="text/tailwindcss">
        .package {
            @apply
            w-72
            p-5
            bg-white
            rounded-xl
            border
            drop-shadow-2xl
        }
    </style>
</head>
<body>
<div class="flex items-end justify-center gap-8">
      <div id="pack1" class="package">
            <div class="title">
                <h4>Enterprise Plan</h4>
            </div>
            <div class="price">
                £350 <small>/ month</small>
            </div>
            <ul>
                <li>Unlimited Couriers</li>
                <li>PDF Supported label formats</li>
                <li>Intelligent Tracking Included**</li>
                <li>Intelligent Address Formatting</li>
            </ul>
            <a href="/" class="get-started-button">
                Get Started
            </a>
        </div>
        <div class="package">
            <div class="title">
                <h4>XXL Plan</h4>
            </div>
            <div class="price">
                £350 <small>/ month</small>
            </div>
            <ul>
                <li>Unlimited Couriers</li>
                <li>PDF Supported label formats</li>
                <li>Intelligent Tracking Included**</li>
                <li>Intelligent Address Formatting</li>
            </ul>
            <a href="/" class="get-started-button">
                Get Started
            </a>
        </div>
</div>
</body>
</html>

直接在外部.css文件中使用@apply是无效的，因为CDN版的Tailwind只会处理带有type="text/tailwindcss"的<style>标签内的内容。要实现将自定义类移到外部文件，有两种可行方式：

方法一：通过@import引入外部样式文件（推荐） #

在HTML中替换原来的内部<style type="text/tailwindcss">标签，改用@import引入外部的main.css：

<style type="text/tailwindcss">
  @import "./assets/css/main.css";
</style>

然后在main.css中直接编写带@apply的类定义：

.package {
  @apply w-72 p-5 bg-white rounded-xl border drop-shadow-2xl;
}

这种方式下，CDN版Tailwind会解析@import加载的外部CSS内容，同时自动应用你在tailwind.config.js中配置的自定义内容。

注意：需要移除原来的<link rel="stylesheet" href="assets/css/main.css">标签，避免样式重复。

方法二：手动编写编译后的CSS（不推荐） #

如果不想使用@import，可以直接在main.css中编写@apply对应的最终CSS样式（即Tailwind编译后的结果）。比如.package对应的编译后样式为：

.package {
  width: 18rem;
  padding: 1.25rem;
  background-color: rgb(255 255 255);
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

这种方法的缺点是：如果后续修改Tailwind配置（比如自定义颜色、间距），需要手动更新这些样式，灵活性较差，仅适合完全静态且无需调整配置的场景。

内容的提问来源于stack exchange，提问作者Yasin Yörük