Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Created January 4, 2021 17:02
Show Gist options
  • Save ahmadawais/b6ff97e77386c90032c719c5c947d823 to your computer and use it in GitHub Desktop.
Save ahmadawais/b6ff97e77386c90032c719c5c947d823 to your computer and use it in GitHub Desktop.
Tailwind Text Decoration Color Utilities Plugin
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
],
@ahmadawais
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment