Buttons variant won't show off as expected

cstisa commented 1 week ago

Hi there! 👋

I have what seems a simple visual issue but can't find a way to solve it.

I just added Flux to my project and tried the buttons with each variant. And for some reason, the variant doesn't work as expected. Here are some examples, but I get some visual bugs for many other components...

Here's the simple code :

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ __('general/general.panel') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script defer src="https://unpkg.com/@alpinejs/ui@3.13.3-beta.4/dist/cdn.min.js"></script>
    <script defer src="https://unpkg.com/@alpinejs/focus@3.13.3/dist/cdn.min.js"></script>
    @livewireStyles
    @fluxStyles
</head>

<body class="min-w-fit">

    <flux:button>Default</flux:button>
    <flux:button variant="primary">Primary</flux:button>
    <flux:button variant="filled">Filled</flux:button>
    <flux:button variant="danger">Danger</flux:button>
    <flux:button variant="ghost">Ghost</flux:button>

    <flux:button href="https://google.com" icon-trailing="arrow-up-right">
        Visit Google
    </flux:button>

    @livewireScripts
    @fluxScripts
</body>

</html>

I updated each of my package like Tailwind, Liveiwre and Laravel but still the same issue.

I also thought it could be my tailwind.config.js file, but I can't see anything weird :

export default {
  mode: 'jit',
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './containers/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  variants: {
    extends: {
      backgroundColor: ["disabled"],
      textColor: ["disabled"],
      opacity: ["disabled"],
      cursor: ["disabled"],
    }
  },
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
    "./vendor/livewire/flux/stubs/**/*.blade.php",
  ],
  safelist: [
    {
      pattern: /bg-(red|green|blue|amber|sky|violet)-(100|200|300|400|500|600|700|800|900)/,
    },
    {
      pattern: /text-(red|green|blue|amber|sky|violet)-(100|200|300|400|500|600|700|800|900)/,
    },
  ],
  theme: {
    extend: {
      colors: {
        primary: '#92288f',
        complementary: '#28922B',
        blackBg: '#252525',
        primaryLight: '#85248E',
        grey: '#BFBFBF',
        greyBg: '#EFEFEF',
        white: '#FFFFFF',
        black: '#000000',
        pink: '#FFABFF',
        pinkStroke: 'rgba(151, 71, 255, 1)',
        turquoise: '#2BFFFF',
        softPink: '#F19EAA',
        orange: '#FF6B00',
        greenTitle: '#8DEC43'
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      }
    }
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

Could someone help me find the problem? Thank you!

jeffchown commented 1 week ago

Hi @cstisa,

Have you compiled your assets? e.g. npm run dev or npm run build

Also, to make your buttons easier to see, try changing your body tag to:

<body class="font-sans antialiased bg-gray-100 dark:!bg-zinc-600">

This is what I see when running your code:

Dark mode:

Light mode:

cstisa commented 1 week ago

I found the issue apparently thanks to @jeffchown too!

The first part was that my default setup is in dark mod, which indeed made the the buttons invisible due to the colors etc. This was my own mistake.

The second problem was the weird behavior with the icon, spacing etc. Apparently, this was due to this configuration in my tailwind.config.js file:

  variants: {
    extends: {
      backgroundColor: ["disabled"],
      textColor: ["disabled"],
      opacity: ["disabled"],
      cursor: ["disabled"],
    }
  },

I suppose that this interfered with the tailwind used in Flux components and made this weird behavior

Thanks anyway for your answer @jeffchown ! 😄

livewire / flux

Buttons variant won't show off as expected #442