Plugin system refer to theme color with opacity

[DennisRosen]

I'd like to define a custom class using the plugin system inside tailwind config. It should apply (among other things) a color from the theme, together with an opacity modifier. I cannot find any documentation how to apply the opacity modifier in this scenario - is this possible? Eg something like this (with the /75 it doesn't work):

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

module.exports = {
  theme: {
    colors: {
      "red": {
        "DEFAULT": "#FF0000"
      }
    }
  },
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        ".my-class": {
          outlineColor: theme("colors.red.DEFAULT/75")
        }
      });
    })
  ]
};

[DennisRosen]

Hi, that is unfortunately not quite correct. I want to change the actual color's opacity as detailed in the below link, not the whole element's opacity.

https://tailwindcss.com/docs/text-color#changing-the-opacity

[wongjn]

The plugin theme():

tailwindcss/src/lib/setupContextUtils.js

Lines 277 to 281 in 4f9f603

	function resolveThemeValue(path, defaultValue, opts = {}) {
	let parts = toPath(path)
	let value = getConfigValue(['theme', ...parts], defaultValue)
	return transformThemeValue(parts[0])(value, opts)
	}

is a bit different to the CSS version of it:

tailwindcss/src/lib/evaluateTailwindFunctions.js

Lines 207 to 248 in 4f9f603

	theme: (node, path, ...defaultValue) => {
	let { isValid, value, error, alpha } = resolvePath(
	config,
	path,
	defaultValue.length ? defaultValue : undefined
	)
	if (!isValid) {
	let parentNode = node.parent
	let candidate = parentNode?.raws.tailwind?.candidate
	if (parentNode && candidate !== undefined) {
	// Remove this utility from any caches
	context.markInvalidUtilityNode(parentNode)
	// Remove the CSS node from the markup
	parentNode.remove()
	// Show a warning
	log.warn('invalid-theme-key-in-class', [
	`The utility \`${candidate}\` contains an invalid theme value and was not generated.`,
	])
	return
	}
	throw node.error(error)
	}
	let maybeColor = parseColorFormat(value)
	let isColorFunction = maybeColor !== undefined && typeof maybeColor === 'function'
	if (alpha !== undefined || isColorFunction) {
	if (alpha === undefined) {
	alpha = 1.0
	}
	value = withAlphaValue(maybeColor, alpha, maybeColor)
	}
	return value
	},

The former only lets you request a path, whereas the CSS version allows alpha channel modifier with it.

To work around this, you could:

• Quote the whole value so that it becomes "CSS" and thus uses the CSS version:

  outlineColor: 'theme(colors.red.DEFAULT/0.75)',

• Use color-mix():

  outlineColor: `color-mix(in oklch, transparent 25%, ${theme(colors.red.DEFAULT)})`,

[DennisRosen]

Quoting the whole value works great, thanks! Would be great if this could be added to tailwind v3's documentation.