Tailwind CDN环境下如何复用含@layer/@apply的样式文件？

Tailwind CDN脚本只会处理页面内联的<style type="text/tailwindcss">标签，不会自动解析通过<link>引入的同类型外部文件，以下是几种可行的解决办法：

方法1：用JavaScript动态加载并注入样式内容 #

写一段简单脚本加载外部CSS内容，再注入到内联的text/tailwindcss类型style标签中，实现多页面共用样式：

<script src="https://cdn.tailwindcss.com"></script>
<script>
  fetch('style.css')
    .then(res => res.text())
    .then(css => {
      const styleEl = document.createElement('style');
      styleEl.type = 'text/tailwindcss';
      styleEl.textContent = css;
      document.head.appendChild(styleEl);
    });
</script>

方法2：用Tailwind CLI编译静态CSS（推荐生产环境） #

如果项目允许本地构建，直接把含@layer/@apply的样式编译成常规CSS，所有页面直接引入编译后的文件即可：

1. 初始化项目并安装Tailwind CLI：

npm install -D tailwindcss
npx tailwindcss init

2. 在tailwind.config.js里配置所有HTML文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html"],
  theme: { extend: {} },
  plugins: [],
}

3. 创建src/styles.css文件，写入自定义样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn_style {
    @apply outline outline-sky-400 p-1 bg-sky-200 rounded-md font-bold;
  }
}

4. 运行编译命令生成最终CSS（--watch会实时监听修改）：

npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch

5. 在HTML页面引入编译后的文件：

<link rel="stylesheet" href="dist/styles.css">

方法3：静态页面复用样式片段（纯静态场景） #

如果是无构建工具的纯静态HTML，可借助模板复用功能或服务器端include：

• 用静态站点生成工具（如Eleventy、Jekyll）：把样式片段做成partial模板，在每个HTML页面中引入。
• 用服务器端include（如Apache SSI、PHP）：比如PHP页面中通过<?php include 'tailwind-components.html'; ?>引入包含style标签的片段文件。

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