tailwind: how to use @apply for custom class in nuxt2?

user_10519069 0
Viewed 945

I am trying to use @apply on my custom class in Nuxt.js 2

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;
    }
}

in any vue-single-file or any other scss file

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

The btn class does not exist. If you're sure that btn exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree

The btn class does not exist. If you're sure that btn exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree

So, how to make my custom styles be seen by the Tailwind CSS before processing to make my custom classes work in @apply?

I've tried the solutions in the following questions and document

But none of them work

I am using:

  • Tailwindcss 2.2.19 via @nuxtjs/tailwindcss
  • Nuxt.js 2.15.8

Thanks a lot for any replies!

nuxt.js tailwind-css css
1 Answers

As I mentioned in the comments, add a mode: "jit" can solve this problem.

tailwind.config.js

module.exports = {
    mode: 'jit'
}

It's a good vanilla solution.

However, if you are programming the project in a virtual machine(Homestead) just like me, this could cause a error that the node can't recoginze the changings of your css/scss/sass files.

so there's another two solutions:

  1. use pure tailwindcss instead of @nuxtjs/tailwindcss

    just follow the document: Install Tailwind CSS with Nuxt.js

  2. use plugin() in your tailwind.config.css

    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

But what's more, this solution can't recoginze the changings too. So add your css/scss/sass files in nuxt.config.js (I'm using 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);
                }
            }
        }
    ]
}
user_105190690
Related