Can the / opacity syntax be bypassed in unsupported environments?

[type1fool]

Since Tailwind uses the rgb(r, g, b / opacity) syntax for almost all of its color utilities, I am unable to render colors using the Prince CLI. Prince is an HTML-to-PDF tool that allows HTML & CSS code to produce a formatted PDF file, but its implementation of CSS specs lags behind in some ways.

After digging through the Tailwind docs and source code, I don't see a clear way to override the default color generator without manually copying in all the hex or rgb values. Is there a way to do this using a custom plugin or other tooling?

Current Behavior

.bg-violet-900 {
  --tw-background-opacity: 1;
  background-color: rgb(76 29 149 / var(--tw-background-opacity));
}

Desired Behavior

.bg-violet-900 {
  --tw-background-opacity: 1;
  background-color: rgba(76, 29, 149, var(--tw-background-opacity));
}

(corrected)

Documentation

• Prince Color docs
• Tailwind Background Color docs
• Tailwind withAlpha() utility

[wongjn]

Unless it is some CSS syntax unique to Prince, I don't believe background-color: rgb(76 29 149, --tw-background-opacity); would be valid. If it follows CSS Color Level 3 specification, it would need to be:

.bg-violet-900 {
  --tw-background-opacity: 1;
  background-color: rgba(76, 29, 149, var(--tw-background-opacity));
}

Where commas separate each component, and the rgba() function is used, not rgb().

---

Regardless, if you are using some PostCSS toolchain, you could consider having a PostCSS plugin that runs after Tailwind that converts the color values to Color Level 3 compatible values.

[type1fool]

Good catch, that was an oversight.

---

It's a Phoenix app using the Tailwind CLI, and PostCSS may not be an option. Is there a way to do this with a custom Tailwind plugin?

[wongjn]

Not that I'm aware of directly. You could try defining colors in a supported CSS format with <alpha-value> as a work-around like:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        violet: {
          '900': 'rgba(76, 29, 149, <alpha-value>)'

You could do this programmatically by getting the colors from tailwindcss/colors and then converting them to this format.

[type1fool]

I like this idea, but the values in tailwindcss/colors are hex, and I believe the Tailwind JIT compiler transforms them into rgb.

console.log(colors);

violet: {
    '50': '#f5f3ff',
    '100': '#ede9fe',
    '200': '#ddd6fe',
...

[wongjn]

Yep, that's what I mean by converting them to the aforementioned format. You'd write some code to convert them and reassign them, like:

const colors = require('tailwindcss/colors');

const convertColors = (colorObject) => {
  // …
};

const rgbaColors = convertColors(colors);

console.log(rgbaColors);
// {
//   violet: {
//     '50': 'rgba(…, <alpha-value>)',
//     '100': 'rgba(…, <alpha-value>)',
//     '200': 'rgba(…, <alpha-value>)',
//     …
// }

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: rgbaColors,

[type1fool]

Gotcha. I should be able to sort this one out. Thank you.

[type1fool]

Thank you again, @wongjn! This worked very well. The PDF generates with border, background, and other colors applied. 🎉

Code

const colors = require("tailwindcss/colors");

function hex_to_rgba(value) {
  value = value.replace("#", "").split("");

  if (value.length == 6) {
    const [a, b, c, d, e, f] = value;
    const red = parseInt(a + b, 16);
    const green = parseInt(c + d, 16);
    const blue = parseInt(e + f, 16);
    return `rgba(${red}, ${green}, ${blue}, <alpha-value>)`;
  } else if (value.length == 3) {
    const [a, b, c] = value;
    const red = parseInt(a + a, 16);
    const green = parseInt(b + b, 16);
    const blue = parseInt(c + c, 16);
    return `rgba(${red}, ${green}, ${blue}, <alpha-value>)`;
  }
}

const colorsLvl3 = Object.entries(colors).reduce((acc, [key, value]) => {
  if (typeof value == "string" && !value.startsWith("#")) {
    acc[key] = value;
  } else if (typeof value == "string" && value.startsWith("#")) {
    acc[key] = hex_to_rgba(value);
  } else if (typeof value == "object") {
    acc[key] = {};
    Object.entries(value).map(([shade, hex]) => {
      acc[key][shade] = hex_to_rgba(hex);
    });
  }

  return acc;
}, {});

Config

module.exports = {
  content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
  theme: {
    colors: colorsLvl3,
    extend: {
      colors: {
        black: colorsLvl3.zinc[950],
        "dark-gray": colorsLvl3.zinc[700],
        "medium-gray": colorsLvl3.zinc[500],
        gray: colorsLvl3.zinc,
        some_alias: {
          primary: colorsLvl3.red[500],
          secondary: colorsLvl3.red[200],
          text: colorsLvl3.red[700],
          ...colorsLvl3.red,
        },
...

Results

{
  inherit: 'inherit',
  current: 'currentColor',
  transparent: 'transparent',
  black: 'rgba(0, 0, 0, <alpha-value>)',
  white: 'rgba(255, 255, 255, <alpha-value>)',
  slate: {
    '50': 'rgba(248, 250, 252, <alpha-value>)',
    '100': 'rgba(241, 245, 249, <alpha-value>)',
    '200': 'rgba(226, 232, 240, <alpha-value>)',
    '300': 'rgba(203, 213, 225, <alpha-value>)',
    '400': 'rgba(148, 163, 184, <alpha-value>)',
    '500': 'rgba(100, 116, 139, <alpha-value>)',
    '600': 'rgba(71, 85, 105, <alpha-value>)',
    '700': 'rgba(51, 65, 85, <alpha-value>)',
    '800': 'rgba(30, 41, 59, <alpha-value>)',
    '900': 'rgba(15, 23, 42, <alpha-value>)'
  },
  gray: {
    '50': 'rgba(249, 250, 251, <alpha-value>)',
    '100': 'rgba(243, 244, 246, <alpha-value>)',
    '200': 'rgba(229, 231, 235, <alpha-value>)',
    '300': 'rgba(209, 213, 219, <alpha-value>)',
    '400': 'rgba(156, 163, 175, <alpha-value>)',
    '500': 'rgba(107, 114, 128, <alpha-value>)',
    '600': 'rgba(75, 85, 99, <alpha-value>)',
    '700': 'rgba(55, 65, 81, <alpha-value>)',
    '800': 'rgba(31, 41, 55, <alpha-value>)',
    '900': 'rgba(17, 24, 39, <alpha-value>)'
  },
  zinc: {
    '50': 'rgba(250, 250, 250, <alpha-value>)',
    '100': 'rgba(244, 244, 245, <alpha-value>)',
    '200': 'rgba(228, 228, 231, <alpha-value>)',
    '300': 'rgba(212, 212, 216, <alpha-value>)',
    '400': 'rgba(161, 161, 170, <alpha-value>)',
    '500': 'rgba(113, 113, 122, <alpha-value>)',
    '600': 'rgba(82, 82, 91, <alpha-value>)',
    '700': 'rgba(63, 63, 70, <alpha-value>)',
    '800': 'rgba(39, 39, 42, <alpha-value>)',
    '900': 'rgba(24, 24, 27, <alpha-value>)'
  },
...

.bg-some_alias-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(221, 214, 254, var(--tw-bg-opacity));
}

[adamwathan]

Try this PostCSS plugin: https://www.npmjs.com/package/postcss-color-rgb

[type1fool]

Thanks Adam.

I'd have to figure out how to setup PostCSS for the esbuild + tailwind cli in this Phoenix app. My PostCSS chops are a bit rusty now 😿. I see a plugin for esbuild, but it doesn't appear to be a trivial process to get this all wired up. @wongjn's idea may be more feesible since.

It would be nice to have a mechanism to adjust the color generator's behavior for scenarios like this.