tailwind：如何在 nuxt2 中使用 @apply 自定义类？

Question

我正在尝试在 Nuxt.js 2 中的自定义类上使用 @apply

nuxt.config.js

export default {
    buildModules: [
        '@nuxtjs/tailwindcss',
    ],
    tailwindcss: {
        cssPath: '~/assets/app.css',
        exposeConfig: true
    }
}

assets/app.css

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

@layer utilities {
    .btn {
        @apply border-2 p-2 font-bold;
    }
}

在任何 vue-single-file 或任何其他 scss 文件中

<style lang="scss">
    .btn-lg {
        @apply btn;
    }
</style>

btn 类不存在。如果您确定 btn 存在，请确保所有 @import 语句都在 Tailwind CSS 看到您的 CSS 之前得到正确处理，因为 @apply 只能用于同一 CSS 树中的类

那么，如何在处理之前让 Tailwind CSS 看到我的自定义样式以使我的自定义类在 @apply 中工作？

---

我已经尝试了以下问题和文档中的解决方案

• adding-custom-utilities
• not able to use custom classes in @apply in scss file tailwind nextjs project?

但它们都不起作用

---

我正在使用：

• Tailwindcss 2.2.19 通过@nuxtjs/tailwindcss
• Nuxt.js 2.15.8

非常感谢您的回复！

Answer 1

正如我在cmets中提到的，添加一个mode: "jit"可以解决这个问题。

tailwind.config.js

module.exports = {
    mode: 'jit'
}

这是一个很好的普通解决方案。

---

但是，如果您像我一样在虚拟机（Homestead）中对项目进行编程，这可能会导致节点无法识别您的 css/scss/sass 文件更改的错误。

所以还有另外两个解决方案：

1. 使用纯tailwindcss 而不是@nuxtjs/tailwindcss

   只需关注文档：Install Tailwind CSS with Nuxt.js

2. 在您的tailwind.config.css 中使用plugin()

   const plugin = require('tailwindcss/plugin')
   const fs = require('fs')
   module.exports = {
     // ... purge, theme, variants, ...
     plugins: [
       plugin(function({ addUtilities, postcss }) {
         const css = fs.readFileSync('./your-custom-style-file-path', 'utf-8')
         addUtilities(postcss.parse(css).nodes)
       }),
    ],
   }
   

   from github

但更重要的是，此解决方案也无法识别更改。所以将你的 css/scss/sass 文件添加到nuxt.config.js（我使用的是nuxt-vite）

vite: {
    plugins: [
        {
            name: 'watch-external', // https://stackoverflow.com/questions/63373804/rollup-watch-include-directory/63548394#63548394
            async buildStart(){
                const files = await fg(['assets/**/*']);
                for(let file of files){
                    this.addWatchFile(file);
                }
            }
        }
    ]
}