Negative value in classname and Outline offset.

[mickeyWoW]

Environment:

tailwindcss-classnames version: 3.0.5

Problem1 - Negative value

When I try to use negative value in classname, it says there is no matched types. For example, when I set left to -16px, we can set in classname "-left-4" but it shows error in this module.

I was tried to find solution without modifying inside module. But there was no way.

Solution:

At first, I have changed npm module and it worked.

node_modules/tailwindcss-classnames/dist/bundle.ts

type TUtilityFunction<T extends string> = ( ...args: Array< | T | `-${T}` // Added prefix here | `!${T}` | `${TPseudoClassVariants}${T}` | `${TPseudoClassVariants}!${T}` | null | undefined | {[key in T | `${TPseudoClassVariants}${T}` | `-${T}``/* Added prefix here */ | \!${T}` | `${TPseudoClassVariants}!${T}` | TTailwindString]?: boolean} | TTailwindString ) => TTailwindString;

Or

After I did like first solution, I was tried to find another solution. I generated custom module named tailwindcss-classnames.ts and made changes.

The same way as above

Problem2 - Outline offset

When I tried change outline offset in tailwind css, we should set outline-offset-2. But there is no way to set outline offset.

Solution

export type TOutlineOffset = | 'outline-offset-0' // Make change 'outline-0' to 'outline-offset-0' | 'outline-offset-1' | 'outline-offset-2' | 'outline-offset-4' | 'outline-offset-8'