Overriding flex-* Utility Not Working as Expected

[iamaliybi]

Description

I want to override the flex-* utility in my project. To achieve this, I added custom variables in my theme.css file:

@theme {
	...
	--flex-1\/2: 0 0 50%;
	--flex-24: 0 0 2.4rem;
	--flex-32: 0 0 3.2rem;
	--flex-36: 0 0 3.6rem;
	--flex-40: 0 0 4rem;
	--flex-48: 0 0 4.8rem;
	--flex-56: 0 0 5.6rem;
	--flex-64: 0 0 6.4rem;
	--flex-80: 0 0 8rem;
	--flex-88: 0 0 8.8rem;
	--flex-328: 0 0 32.8rem;
	...
}

Additionally, I defined a new utility for flex-* like this:

@utility flex-* {
	flex: --value(--flex-*);
}

Expected Behavior

When using .flex-56, I expect the following CSS to be applied:

.flex-56 {
	flex: var(--flex-56);
}

Actual Behavior

However, the result is not working as expected. Here is the output I get:

Question

How can I ensure that .flex-56 correctly applies flex: var(--flex-56);?
Is there something wrong with how I am defining the utility?

Thanks in advance for your help!

[wongjn]

From the look of your screenshot, it does seem like flex: var(--flex-56) is being applied.

[iamaliybi]

Yes, but i wanna remove default flex utility (flex: 56)

[wongjn]

You can't with Tailwind alone. You'd need some process that runs after Tailwind that removes the unwanted declarations/rules for you.

[iamaliybi]

@wongjn Thank you for your reply. How can I remove the unwanted declarations/rules?

[wongjn]

You'd need some process that runs after Tailwind that removes the unwanted declarations/rules for you.