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

Tailwind config: Using closure to access theme function leads to invalid base style rule #7186

Closed
edda opened this issue Jan 24, 2022 · 2 comments · Fixed by #7288
Closed

Comments

@edda
Copy link

edda commented Jan 24, 2022

What version of Tailwind CSS are you using?
v3.0.14

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/adavrUyj2z?file=config

Describe your issue

When using a closure to access the theme function inside the backgroundColor section in the tailwind.config.js like so:

        theme: {  
          borderColor: ({theme}) => ({
            ...theme('colors'),
            danger: "#f00",
          }),
        }

or even without accessing theme:

        theme: {  
          borderColor: ({theme}) => ({
            danger: "#f00",
          }),
        }

the base style border-color (https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css#L12) comes out as:

        *, ::before, ::after {
          box-sizing: border-box;
          border-width: 0;
          border-style: solid;
          border-color: 'currentColor';
        }

wrong-color-2

which is ignored by the browser because it is an invalid value. Without the closure it is:

        *, ::before, ::after {
          box-sizing: border-box;
          border-width: 0;
          border-style: solid;
          border-color: currentColor;
        }

This is especially problematic if you minimize your CSS in the build step, because the minimization will turn the three separate border rules into a single rule:

   border: 0 solid 'currentColor';

wrong-color

The invalid color value makes the whole rule invalid which can lead to elements suddenly having borders even though you don't expect them to (this is how I found the issue ;)).

edda added a commit to sapcc/juno that referenced this issue Jan 24, 2022
This is because using the closure to access the theme function currently
causes the base style for border to be invalid. See here:
tailwindlabs/tailwindcss#7186
@diegohaz
Copy link

diegohaz commented Jan 25, 2022

Also seeing this issue with v3.0.12. Using v3.0.11 for now.

Maybe a regression introduced by #6926? (cc @thecrypticace)

@kwypchlo
Copy link

I have exactly the same issue with "currentColor" being in quotes in my project.
https://github.com/SkynetLabs/skynet-webportal/tree/master/packages/website

Screenshot 2022-01-28 at 18 16 37

Downgrading to v3.0.11 solves the issue.

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

Successfully merging a pull request may close this issue.

3 participants