tailwind: how to use #apply for custom class in nuxt2? - css

Question

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
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
adding-custom-utilities
not able to use custom classes in #apply in scss file tailwind nextjs project?
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!

Answer 1

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:
use pure tailwindcss instead of #nuxtjs/tailwindcss
just follow the document: Install Tailwind CSS with Nuxt.js
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);
}
}
}
]
}