Class name convention for text-decoration plugin

[dance2die]

How should I name classes that can be potentially be too long?

Working Tailwind Play (with dis javascript): https://play.tailwindcss.com/tQSnU0tOUe
Source: https://github.com/downwindcss/text-decoration/tree/composable (disregard README as it's not up to date).

Context

Creating a composable text-decoration plugin following Adam's Composing the Uncomposable with CSS Variables post.

text-decoration has many properties.

1. text-decoration-line
2. text-decoration-color
3. text-decoration-style
4. text-decoration-thickness

Issue

The problem is that, class names prefixed with text-decoration- can be too long (resulting in bigger bytes and more keyboard strokes).

<h2 class="
    text-decoration 
    text-decoration-line-underline 
    text-decoration-line-overline 
    text-decoration-line-through 
    text-decoration-red-400 
    text-decoration-style-wavy 
    text-decoration-thickness-2">header</h2>

So my workaround was to prefix with td- instead of text-deocration- but doesn't make it look as readable.

Would it be better naming convention? (td- or text-decoration-)?