tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Missing some utilities class on Nuxt 3 with latest version

Open Layenzz opened this issue 6 months ago • 3 comments

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'),
  ]
}

image image

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

image

Additional context

No response

Logs

No response

Layenzz avatar Aug 08 '24 22:08 Layenzz