Colors defined as functions cause error

[Nick-Mazuk]

If you define colors as functions, it breaks @tailwind/typography.

This code works correctly on Tailwind v1.9

error - ./styles/globals.css:2024:9
Syntax error: Unknown word

  2022 | .prose-primary a {
  2023 |   color: ({ opacityVariable, opacityValue }) => {
> 2024 |         if (typeof opacityValue !== 'undefined') return `rgba(${colorString}, ${opacityValue})`
       |         ^
  2025 |         if (typeof opacityVariable !== 'undefined')
  2026 |             return `rgba(${colorString}, var(${opacityVariable}, 1))`

Metadata

• tailwindcss: 2.0.3
• @tailwindcss/typography: 0.4.0
• postcss: 8.2.6

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Looking at your error confuses me are you writing the JavaScript code inside your globals.css file?
The code is is JavaScript code that should be located in your tailwind.config.js, if that is already the case can you try and reproduce it on https://play.tailwindcss.com and share it?

[Nick-Mazuk]

Thanks for the follow-up, Robin!

Unfortunately, I can't reproduce it in the playground since it's not updated to v2.0.3. There was bug fix tailwindlabs/tailwindcss#2919 that added support for functions as colors that wasn't merged until the latest patch release. Therefore, trying to reproduce it on the current playground would give you a different error.

Will create minimal reproduction soon when I get time. In the meantime, here's the full config that's producing it. https://github.com/Nick-Mazuk/ui-config/blob/master/tailwind.js

[Svish]

Just ran into this error myself when following that same guide on how to use CSS variables and opacity. Super confusing. Only discovered the source because I pretty much randomly decided to comment out the typography plugin. Once I did, the error went away immediately.

It seems the function definition gets merged into the CSS, or something weird like that? I've seen both the Unknown word error and a Missing semicolon error (or something like that). And the error always points to the CSS file, which is very confusing since the withOpacity function is both defined and called in the tailwind.config.js file.

[Svish]

Here's a fairly minimal reproduction using Next.js:
https://github.com/Svish/tailwindcss-typography-issue-143

If you comment out this line, you should be getting this error:

Failed to compile.

./styles/tailwind.css
Error: Syntax error: Unknown word

  1869 |   color: ({ opacityVariable, opacityValue }) => {
  1870 |     if (opacityValue !== undefined) {
> 1871 |       return `rgba(var(${variableName}), ${opacityValue})`;
       |       ^
  1872 |     }
  1873 |     if (opacityVariable !== undefined) {
    at async Promise.all (index 0)

[Svish]

crswll on Discord was able to figure out the issue probably happens here:

• src/styles.js#L1109-L1110

Crash seems to happen when using prose-somecolor and somecolor.600 is a function? Or something like that?

[Nick-Mazuk]

crswll on Discord was able to figure out the issue probably happens here:

• src/styles.js#L1109-L1110

Crash seems to happen when using prose-somecolor and somecolor.600 is a function? Or something like that?

Fairly sure that's it.

[christopher-siegel]

I've had the same issue after following this guide: https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

It's a guid to get css variables for colors working with the opacity modifiers of tailwind. It basically makes bg-my-color-500 bg-opacity-50 working as expected. Otherwise the color will not use the opacity of bg-opacity-50. That's what the function is for.

But as @Nick-Mazuk stated, that "bug" on line 1109 in the typography plugin makes my build fail. It just gets the value (which is a function) without evaluating it first (like all other places where tailwind loads a color from the config.

After i removed the function from my 600 color, it worked again.

I don't know how to fix that line here: https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L1109-L1110

any ideas?

[christopher-siegel]

Anyone looking for a quick fix, this worked for me:

add this to your config under theme > extend:

  theme: {
    extend: {
      typography: (theme) => ({
          yourcustomname: {
              css: {
                  a: {
                      color: 'rgb(var(--theme-color-600))',
                  },
                  'a code': {
                    color: 'rgb(var(--theme-color-600))',
                  }
              },
          },
          DEFAULT: {
              css: {
                  a: {
                      color: 'rgb(var(--theme-color-600))',
                  },
                  'a code': {
                    color: 'rgb(var(--theme-color-600))',
                  }
              },
          },
      }),
  }
}

this makes it work with bg-yourcustomname-500 and the default.

This will create this CSS for the typography plugin:

 .prose-yourcustomname a {
	color: rgb(var(--theme-color-600));
}
 .prose-yourcustomname a code {
	color: rgb(var(--theme-color-600));
}

What this does:
Override the colors used for a and a code of the prose classes. These don't use the theme() function like other colors in the typography bundle and thus don't evaluate functions. By using above config you tell the typogaphy bundle to override those parts with rgb(var(--theme-color-600)); using regular rgb and a css var (so no functions). This makes it work 👍

Hope that helps :)

[thecrypticace]

@Nick-Mazuk Just checked this with the latest typography plugin and Tailwind CSS v3.0 and does not look to be an issue anymore.

@Svish thanks for the repro! Was helpful!