如何正确配置Nuxt3与TailwindCSS并为内容应用样式？

问题1：Markdown文件中::p{.text-sky-700}语法无效 #

• 确认使用Nuxt Content的正确自定义块语法：需以三个冒号开头，即:::p{.text-sky-700}，而非两个冒号。
• 确保tailwind.config.js的content数组包含Markdown文件路径，让Tailwind能扫描到类名并生成对应样式：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./components/**/*.{js,vue,ts}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./plugins/**/*.{js,ts}",
      "./app.vue",
      "./content/**/*.md" // 新增此行
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 若仍无效，可直接在Markdown中用HTML标签加class替代：<p class="text-sky-700">你的文本内容</p>，这种方式兼容性更强。

问题2：Scoped样式中使用@apply报错「Cannot apply unknown utility class」 #

• Vue的scoped样式隔离机制与Tailwind类生成时机存在冲突，无法直接在scoped样式中使用@apply，可通过以下方式解决：
  1. 在组件的scoped样式内，先通过@layer utilities定义本地工具类，再用@apply引用：

     <script setup>
     // 组件逻辑
     </script>
     
     <template>
       <div class="blog-content">
         <!-- 页面内容 -->
       </div>
     </template>
     
     <style scoped>
     @layer utilities {
       .blog-content-padding {
         @apply pt-7;
       }
     }
     .blog-content {
       @apply blog-content-padding;
     }
     </style>
     

  2. 更推荐直接在模板元素上使用Tailwind原子类，比如<div class="pt-7">，避免@apply的额外配置成本。

问题3：全局样式非最优方案的替代 #

• 除上述scoped内自定义工具类的方法，还可选择：
  • 创建组件级CSS文件（如assets/css/blog-post.css），在文件内使用@apply后，通过scoped方式引入：

    <style scoped src="@/assets/css/blog-post.css"></style>
    

  • 结合Nuxt路由守卫或组件生命周期钩子，动态按需加载特定样式文件，避免全局污染。

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