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")
        }
      });
    })
  ]
};

[elena56brown]

It looks like you're on the right track with your Tailwind CSS plugin setup! However, the syntax you're using for applying opacity isn't quite correct. To achieve this, you'll need to use the opacity utility class instead of trying to directly apply it within the addComponents function.

Here's an updated version of your code: HomeDepot Survey
`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"),
opacity: "75%"
}
});
})
]
};
`

In this example, the opacity property is set to "75%" to apply the desired opacity.

[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)})`,