tailwindcss
tailwindcss copied to clipboard
Missing some utilities class on Nuxt 3 with latest version
Environment
- Operating System: Windows_NT
- Node Version: v18.18.0
- Nuxt Version: 3.11.1
- CLI Version: 3.10.0
- Nitro Version: -
- Package Manager: [email protected]
- Builder: -
- User Config: devtools, devServer, extends, runtimeConfig, vite, modules, hooks, experimental, optimizeDeps
- Runtime Modules: @nuxtjs/[email protected], @vueform/[email protected], @nuxtjs/sitemap@^5.1.4
- Build Modules: -
Reproduction
No response
Describe the bug
I have a bug when I use certain class utilities, I hadn't noticed this at first but now I realize it and it's really impacting I'll explain:
I'm using nuxt 3 layers and the style is well generated, but certain classes are missing, for example:
If I set the max-w-md class, the class exists and the style is applied. If I set the max-w-sm class, it doesn't work, even though it's in the official tailwind doc and I'm using the latest version.
Shelter values don't work either, for example:
if I set max-w-[20vw] it doesn't work
I've tried reinstalling tailwind without the module and with the module, but nothing works.
I've put together two images where you can see the problem
Here's my tailwind.config.js config:
const colors = {/***/} //My colors
export default {
content: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
theme: {
colors: colors,
extend: {
maxWidth: {
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
'50vw': '50vw',
'15vw': '15vw',
},
'@container': 'container-type: inline-size;',
'size-full': 'container-type: inline-size;'
},
screens: {
'sm': '600px',
'md': '960px',
'lg': '1280px',
'xl': '1920px',
'2xl': '2560px',
}
},
plugins: [
require('@vueform/vueform/tailwind'),
]
}
P.S: The last image is the content used by nuxt that is displayed when I do this in my nuxt.config.ts :
hooks: {
tailwindcss:config'(config: any) {
console.log(config)
}
}
Thanks for all
Additional context
No response
Logs
No response