search

barvian / fluid-tailwind

Build better responsive designs in less code.
https://fluid.tw
MIT License
1.15k stars 18 forks source link

[Nuxt 3.14.0] Cannot read properties of undefined (reading 'prefix') #54

Open barvian opened 13 hours ago

barvian commented 13 hours ago

I got a build error, now after upgrading to nuxt 3.14.0

I'm using Nuxt UI

[unhandledRejection] Cannot read properties of undefined (reading 'prefix')                      2:46:37 PM

  at extract (node_modules/fluid-tailwind/dist/index.js:15430:43)
  at node_modules/@nuxtjs/tailwindcss/dist/module.mjs:135:18
  at _defu (node_modules/defu/dist/defu.mjs:31:19)
  at _defu (node_modules/defu/dist/defu.mjs:37:21)
  at node_modules/defu/dist/defu.mjs:52:33
  at Array.reduce (<anonymous>)
  at node_modules/defu/dist/defu.mjs:52:16
  at configMerger (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:138:5)
  at configs.reduce.configMerger.content.files (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:249:23)
  at Array.reduce (<anonymous>)

got it when running npm run dev.

Originally posted by @martijndewit in https://github.com/barvian/fluid-tailwind/issues/50#issuecomment-2457237937

barvian commented 12 hours ago

Hi, could you post your Tailwind config?

martijndewit commented 11 hours ago

It's kind of big, so I removed the color and font declaration. tailwind.config.ts:

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
import colors from 'tailwindcss/colors'
import fluid, { extract, screens } from 'fluid-tailwind'
import typography from '@tailwindcss/typography'
import forms from '@tailwindcss/forms'
import containerQueries from '@tailwindcss/container-queries'

export default <Partial<Config>>(<unknown>{

  content: {
    extract,
  },
  corePlugins: {
    clear: false,
    space: false,
  },
  darkMode: 'class',
  theme: {
    screens,
    backgroundSize: {
      gridLine: '100% 30px',
    },
    spacing: {
      '0': '0px',
      px: '1px',
      '0.5': '2px',
      '1': '0.3125rem',
      '1.5': '0.5rem',
      '2': '0.625rem',
      '2.5': '0.75rem',
      '3': '0.9375rem',
      '3.5': '1rem',
      '4': '1.25rem',
      '5': '1.5625rem',
      '6': '1.875rem',
      '7': '2.1875rem',
      '8': '2.5rem',
      '9': '2.8125rem',
      '10': '3.125rem',
      '11': '3.4375rem',
      '12': '3.75rem',
      '14': '4.375rem',
      '16': '5rem',
      '20': '6.25rem',
      '24': '7.5rem',
      '28': '26.25rem',
      '32': '10rem',
      '36': '11.25rem',
      '40': '12.5rem',
      '44': '13.75rem',
      '48': '15rem',
      '52': '16.25rem',
      '56': '17.5rem',
      '60': '18.75rem',
      '64': '20rem',
      '72': '22.5rem',
      '80': '25rem',
      '96': '30rem',
    },
    extend: {
      fontSize: {
        xs: ['0.666666666667rem', 'inherit'],
        sm: ['1rem', '1.875rem'],
        base: [
          '1.125rem',
          {
            lineHeight: '1.875rem',
            fontWeight: '500',
          },
        ],
        lg: [
          '1.313rem',
          {
            lineHeight: '1.875rem',
            letterSpacing: '0',
            fontWeight: '600',
          },
        ],
        xl: [
          '1.813rem',
          {
            lineHeight: '1.875rem',
            letterSpacing: '0',
            fontWeight: '800',
          },
        ],
        '2xl': [
          '2.938rem',
          {
            lineHeight: '3.75rem',
            letterSpacing: '0',
            fontWeight: '800',
          },
        ],
        '3xl': [
          '4.75rem',
          {
            lineHeight: '5.625rem',
            letterSpacing: '0',
            fontWeight: '800',
          },
        ],
        '4xl': [
          '5.3125rem',
          {
            lineHeight: '5.625rem',
            letterSpacing: '0.01em',
            fontWeight: '800',
          },
        ],
        dlg: [
          '1.313rem',
          {
            lineHeight: '1.875rem',
            letterSpacing: '0.01em',
            fontWeight: '200',
          },
        ],
        dxl: [
          '1.813rem',
          {
            lineHeight: '1.875rem',
            letterSpacing: '0.01em',
            fontWeight: '200',
          },
        ],
        d2xl: [
          '2.938rem',
          {
            lineHeight: '3.75rem',
            letterSpacing: '0.01em',
            fontWeight: '200',
          },
        ],
        d3xl: [
          '4.75rem',
          {
            lineHeight: '3.75rem',
            letterSpacing: '0.01em',
            fontWeight: '200',
          },
        ],
      },
      lineHeight: {
        'leading-normal': '1.666',
      },
      aspectRatio: {
        auto: 'auto',
        square: '1 / 1',
        video: '16 / 9',
        screen: '4 / 3'
      },
      gradientColorStartPositions: {
        '1px': '1px',
      },
      gradientColorStopPositions: {
        '1px': '1px',
        '120px': '120px',
        '122px': '122px',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      keyframes: {
        blob: {
          '0%': {
            translate: '0 0',
            rotate: '0deg',
          },
          '30%': {
            rotate: '40deg',
          },
          '50%': {
            transform: 'translate(300px, 390px) scale(1.1)',
          },
          '80%': {
            rotate: '90%',
          },
        },
        fadeIn: {
          '0%': {
            opacity: '0',
          },
          '100%': {
            opacity: '1',
          },
        },
      },
      animation: {
        borderSpin: 'borderSpin 3s linear infinite',
        blob: 'blob 20s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045)',
        'blob-reverse':
          'blob 28s infinite cubic-bezier(0.215, 0.61, 0.355, 1) reverse',
        fadeIn: 'fadeIn 1s normal cubic-bezier(0.4, 0, 0.2, 1)'
      },
      boxShadow: {
        'sticker': '0 0 8px 4px rgba(0, 0, 0, 0.15)',
      }
    },
  },
  safelist: [
    {
      pattern: /ring-secondary-[^/]+$/,
      variants: 'dark',
    },
    {
      pattern: /bg-secondary-[^/]+$/,
      variants: 'dark',
    },
    {
      pattern: /text-primary-[^/]+$/,
      variants: 'dark',
    },
  ],
  plugins: [
    typography,
    forms,
    containerQueries,
    fluid,
  ],
})
barvian commented 11 hours ago

Thanks, are you using @nuxtjs/tailwindcss too?

martijndewit commented 11 hours ago

yes via Nuxt UI

 "node_modules/@nuxt/ui": {
      "version": "2.18.7",
...
      "dependencies": {
        "@headlessui/tailwindcss": "^0.2.1",
        "@headlessui/vue": "^1.7.23",
        "@iconify-json/heroicons": "^1.2.1",
        "@nuxt/icon": "^1.5.5",
        "@nuxt/kit": "^3.13.2",
        "@nuxtjs/color-mode": "^3.5.1",
        "@nuxtjs/tailwindcss": "^6.12.1",
        "@popperjs/core": "^2.11.8",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/container-queries": "^0.1.1",
        "@tailwindcss/forms": "^0.5.9",
        "@tailwindcss/typography": "^0.5.15",
        "@vueuse/core": "^11.1.0",
        "@vueuse/integrations": "^11.1.0",
        "@vueuse/math": "^11.1.0",
        "defu": "^6.1.4",
        "fuse.js": "^7.0.0",
        "ohash": "^1.1.4",
        "pathe": "^1.1.2",
        "scule": "^1.3.0",
        "tailwind-merge": "^2.5.3",
        "tailwindcss": "^3.4.13"
      }
    },