Tailwind Text Decoration Color Utilities Plugin

tailwind.config.js

const decoration = plugin(function ({ e, addUtilities, theme }) {
	colors = theme('colors');

	const decorationColors = Object.keys(colors).reduce((acc, key) => {
		if (typeof colors[key] === 'string') {
			return {
				...acc,
				[`.decoration-${e(key)}`]: {
					'text-decoration-color': colors[key],
				},
			};
		}

		const variants = Object.keys(colors[key]);

		return {
			...acc,
			...variants.reduce(
				(a, variant) => ({
					...a,
					[`.decoration-${e(key)}-${variant}`]: {
						'text-decoration-color': colors[key][variant],
					},
				}),
				{}
			),
		};
	}, {});

	addUtilities(decorationColors);
});

// In the tailwind config.
plugins: [
  // Other plugins
  decoration
],

Text Decoration Color - TailwindCSS Plugin

This plugin generates classes for anchor link text-decoration coloring carets using text-decoration-color: <color>;. Where the <color> part comes from your tailwind config colors — so you can use decoration-gray-500 or custom colors decoration-sop-900.

Installation

Put this anywhere or inside the tailwind cofig file (I should publish it soon)

const decoration = plugin(function ({ e, addUtilities, theme }) {
	colors = theme('colors');

	const decorationColors = Object.keys(colors).reduce((acc, key) => {
		if (typeof colors[key] === 'string') {
			return {
				...acc,
				[`.decoration-${e(key)}`]: {
					'text-decoration-color': colors[key],
				},
			};
		}

		const variants = Object.keys(colors[key]);

		return {
			...acc,
			...variants.reduce(
				(a, variant) => ({
					...a,
					[`.decoration-${e(key)}-${variant}`]: {
						'text-decoration-color': colors[key][variant],
					},
				}),
				{}
			),
		};
	}, {});

	addUtilities(decorationColors);
});

Usage

Add it to the plugins array of your Tailwind config.

plugins: [
  // Other plugins
  decoration,
],

For each color in colors config of tailwind a caret-{color} class is created, analog to bg- and text- classes.

License

This project is licensed under the MIT License.