Variable colors with <alpha-value> not working with theme function in Typography

[macmladen]

What version of @tailwindcss/typography are you using?

0.5.7

What version of Node.js are you using?

v20.16.0

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/Vy3U1DPfEc

Describe your issue

I found that using variables in tailwind.config.js a described in documentation works with Tailwind itself but it does not work in plugin Typography.

That is demonstrated in the playground: https://play.tailwindcss.com/Vy3U1DPfEc

The problem

Here, using Tailwind class generated from the custom colors defined by variables work: text-body/50 using --drupal-red and 50% opacity:

.text-body\/50 {
  color: rgb(var(--drupal-red) / 0.5);
}

The same is not working with .prose at all: when compiled, it retains <alpha-value> as literal

--tw-prose-body: rgb(var(--drupal-red) / <alpha-value>);

Files (partial)

style.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  :root {
    //-- Drupal Color system --
    // Primary Color Palette
    --drupal-blue: 0 156 222;
    --drupal-dark-blue: 0 106 169;
    --drupal-navy: 18 40 95;

    // Secondary Color Palette
    --drupal-light-blue: 204 237 249;
    --drupal-black: 0 0 0;
    --drupal-white: 255 255 255;

    // Tertiary Color Palette
    --drupal-purple: 204 237 249;
    --drupal-yellow: 255 196 35;
    --drupal-red: 244 99 81;
    --drupal-green: 57 118 43;
  }
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        body:  'rgb(var(--drupal-red) / <alpha-value>)',
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            // This works
            // '--tw-prose-body': 'rgb(var(--drupal-red))',
            // But I want the colors.body used here:
            '--tw-prose-body': theme('colors.body'),
          },
        },
      }),
    },
  },
  // ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

[adamwathan]

Hey good catch, thanks for reporting! It turns out all the <alpha-value> stuff is kinda unnecessary these days and creates more problems than it solves, so I've updated the docs to just not even mention it:

tailwindlabs/tailwindcss.com#1868

Instead of <alpha-value> just use 1 and everything will work much better:

https://play.tailwindcss.com/a8JcZfAxdc?file=config

Going to close this one as something we don't explicitly intend to fix, but if you just follow the suggestion above everything will work properly. The other good news is that in v4 we handle all this stuff in a totally different way that works even better, so this will be even less of a problem in the next major release.

[macmladen]

@adamwathan Maybe unrelated but is there any hint on v4.0 readiness? The last hint/post about progress was in the blog post on March 6th.

[adamwathan]

@macmladen Going to post another blog post this week! But can see what we've done so far in the changelog:

https://github.com/tailwindlabs/tailwindcss/blob/next/CHANGELOG.md

[macmladen]

@adamwathan Like I felt it in the air! I'm hardly waiting, especially beta stability and documentation so we can seriously start the research on integration (Drupal, in my case).