如何将Tailwind CSS自定义样式迁移至外部CSS文件？

我按照Tailwind CSS官方Play CDN文档添加的自定义CSS是有效的，示例代码如下：

<style type="text/tailwindcss">
    @layer components {
      .card {
        @apply bg-slate-200 border-4;
      }
    }
</style>

<div class="grid grid-cols-2 gap-3">
   <h1 class="p-2 bg-slate-200">
      Hello world!
    </h1>
</div>
 
<div class="grid grid-cols-4 gap-4">
   <div class="card border-t-purple-500"><img src="https://images.unsplash.com/photo-1591886891704-8f84fe0c42f0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODAxNzg4OTI&ixlib=rb-4.0.3&q=85" alt="apple from Unsplash" width="60" height="60">01 <br/> <a href="https://google.com" target="_blank">Open Link</a></div>
   <div class="card border-t-orange-500"><img src="https://images.unsplash.com/photo-1652441547536-f6edb2fc5206?crop=entropy&cs=srgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODAxNzg5NDc&ixlib=rb-4.0.3&q=85" alt="rubber duckie from Unsplash" width="60" height="60">02</div>
   <div class="card border-b-green-500">03</div>
   <div class="card">04</div>
   <div class="card">05</div>
   <div class="card">06</div> 
   <!-- ... -->
   <div>09</div>
 </div>

但我不知道该怎么把这些自定义CSS迁移到外部CSS文件中，希望能得到指导。

要把内联的Tailwind自定义CSS迁移到外部文件，只需按以下步骤操作：

1. 创建外部CSS文件 #

新建一个后缀为.css的文件（比如custom-styles.css），把原来内联<style>标签里的内容完整复制进去：

@layer components {
  .card {
    @apply bg-slate-200 border-4;
  }
}

2. 在HTML中引入外部CSS文件 #

在HTML的<head>标签里，在Tailwind CDN脚本之后引入这个外部CSS文件，注意要给<link>标签加上type="text/tailwindcss"属性，这样Tailwind的CDN才能识别并处理里面的自定义指令：

<head>
  <!-- 引入Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入外部自定义CSS -->
  <link rel="stylesheet" href="custom-styles.css" type="text/tailwindcss">
</head>

3. 移除原内联样式 #

删除HTML里原来的<style type="text/tailwindcss">标签及其内容，保留页面结构部分即可。

这样处理后，外部CSS里的@layer和@apply指令就能被Tailwind CDN正常解析，效果和原来的内联样式完全一致。

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