Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alpha values not reflected correctly when loading colors added by tailwindcss-themer from other plugins #121

Closed
dungsil opened this issue Dec 28, 2023 · 2 comments

Comments

@dungsil
Copy link

dungsil commented Dec 28, 2023

Describe the bug

When the value applied to the themer is called into the theme function, the is exposed as is (no color is applied).

image

Your minimal, reproducible example

https://github.com/dungsil/issues/tree/main/tailwindcss-themer-121

Steps to reproduce

  1. define color values in themer plugin backgroundColor, textColor, borderColor, etc...
  2. After adding the new plugin, use the values extended by tailwindcss-themer.
  3. the alpha value will be output as <alpha-value> when applied.

Expected behavior

It should output 1, not <alpha-value>.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS: Windows 11
  • Browser: Firefox Devlopment Edition
  • Node.js : v20.10.0

tailwindcss-themer version

v4.0.0

Additional context

No response

@dungsil dungsil changed the title If you use the theme function to apply the color, the <alpha-value> value is not applied. Alpha values not reflected correctly when loading colors added by tailwindcss-themer from other plugins Dec 28, 2023
@RyanClementsHax
Copy link
Owner

Thanks for opening this. I'll take a look at it soon

@RyanClementsHax
Copy link
Owner

It seems this is an existing bug/limitation within Tailwind. Looking at tailwind's open issues, it seems this should help tailwindlabs/tailwindcss#9143 (comment)

This worked for me

    plugin(function ({ addBase }) {
      addBase({
        '#plugin': {
          backgroundColor: "theme('backgroundColor.base')" // 👈🏻 Wrap it in a string instead
        }
      })
    })

Does this work for you?

I'm going to close this preemptively as expected behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants