Hugo Comments - Answer Overflow

Hugo

Explore posts from servers

•Created by Hugo on 1/5/2025 in #❓・help

Nuxt ui Custom Color doesn't work

Okay, thank you, i didn't saw this line. By the way, do you ave any idea, why tailwind don't create css variables when i define it as variable ? I would like to uses my colors as css variable but tailwind (via Nuxt/Ui i guess) transform my variable directly to rgba color

9 replies

NNuxt

•Created by Hugo on 1/3/2025 in #❓・help

nuxt/ui tailwind intellisense not working

1. Nuxt ui v3 use the alpha version of tailwind v4, so it doesn't use a realse but an alpha (its written in this documentation: https://ui3.nuxt.dev/getting-started/theme ("Nuxt UI v3 uses Tailwind CSS v4 beta, you can read the prerelease documentation for more information.") 2. just answered before 3. it's not a standard approach but lot of users had this issue and on github of tailwind solved with this, since tailwind v4 is till in alpha, maybe it's a workaround, waiting for the release and a stable solution. On tailwind v4 there is no more tailwind.config.ts or .js everything is setup in the main.Scss file @kapa.ai

24 replies

NNuxt

•Created by Hugo on 1/3/2025 in #❓・help

nuxt/ui tailwind intellisense not working

@kapa.ai i found how to fix that. To make Tailwind intellisense works with tailwind v4 and nuxt ui v3 you have to add in your workspace settings this line: "

tailwindCSS.experimental.configFile": "./assets/css/main.css",

the goal is to set ad config fail your main.css file where you define all your new tailwind settings

24 replies

NNuxt

•Created by Hugo on 1/3/2025 in #❓・help

nuxt/ui tailwind intellisense not working

@kapa.ai i did everything you told me and it still not works. Maybe because nuxt/ui uses tailwind v4 and tailwind intellisense doesn't maybe work with tailwind v4 ?`

24 replies

NNuxt

•Created by Hugo on 1/3/2025 in #❓・help

nuxt/ui tailwind intellisense not working

@kapa.ai i added the settings for vscode you gave me. i restarted vscode and nothing changed. here is my tailwind.config.ts

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',

  content: [
    './pages/**/*.{vue,js}',
    './components/**/*.{vue,js}',
    './layouts/**/*.{vue,js}',
    './assets/**/*.{vue,scss}',  // Prendre en compte les fichiers SCSS
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import { utilities } from './plugins/tailwind/utilities'
import designSystem from './tailwind.ds'

export default <Partial<Config>>{
  darkMode: 'class',

  content: [
    './pages/**/*.{vue,js}',
    './components/**/*.{vue,js}',
    './layouts/**/*.{vue,js}',
    './assets/**/*.{vue,scss}',  // Prendre en compte les fichiers SCSS
  ],
  theme: {
    extend: {
      container: {
        center: true,
        padding: "1rem",
      },
      fontFamily: {
        'primary': ['Space Grotesk', 'sans-serif']
      },
      padding: {
        '1/5': '50%',
      },
      transitionTimingFunction: {
        bounce: 'cubic-bezier(.6,2.7,.8,.8)'
      },
      boxShadow: {
        "offer-card": "0px 0px 15px 0px rgba(0,0,0,0.15)",
      }
    },
  },
  plugins: [
    utilities,
    designSystem,
    typography,
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

24 replies

NNuxt