flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Unable to alias colors after loading Flowbite plugin

Open Destaq opened this issue 1 year ago • 2 comments

Describe the bug

In 'native' Tailwind, I can alias colors — e.g. have X-gray-XX point to X-pink-XX, etc. However, if I load the Flowbite plugin into my Tailwind config (via plugins: [require("flowbite/plugin")]), this behavior is prevented, and only new custom colors can be created.

To Reproduce

  1. Go to this Tailwind Play minimum reproducible example.
  2. Note that the gray – pink alias does not work.
  3. Remove the Flowbite plugin import.
  4. Note that the gray – pink alias does work.

Expected behavior

The Flowbite plugin shouldn't disable color aliasing.

Desktop (please complete the following information):

  • OS: macOS Ventura
  • Browser: Brave
  • Version: latest Flowbite version, Brave v. 1.48

Additional context:

Problem occurs in other major browsers as well.

Destaq avatar Feb 17 '23 21:02 Destaq

I poked around a bit in the node_modules folder and figured things out — it seems like the colors need to be aliased from within the extend key, as so:

theme: {
        extend: {
            colors: {
                gray: colors.pink,
            }
        },
    },

However, still leaving this app, as the relevant official Flowbite documentation section is currently misleading / incomplete.

Destaq avatar Feb 17 '23 21:02 Destaq

Bump up the issue. It should not work like this and if it should, then it should be described in the documentation

blueambr avatar Aug 07 '23 14:08 blueambr