How to Leverage the Default CSS Variables in Tailwind

[ethan-web-dev]

TLDR;

I have two and a half problems:

1. I could just be uninformed as to how tailwind handles css variables or I may be pushing the limits of linear-gradient (most likely)

2. I want to use tailwinds native custom css properties but it appears --tw-gradient-via is broken.

2.5) I have been coding all day so my brain may be broken.

What isn't broken is my underlying code thankfully, I have been able to distill the issue to '--tw-gradient-via'.

I need help to determine where the issue lies. It will dictate whether or not to stop attempting to implement this way, start a new issue, or start getting ready for bed (but I don't want to go to bed yet). Fundamentally, I also appreciate the heck out of tailwind and am always interested in learning it down to the fringes.

Thank you.

---

I am reading the code relative to the bg-gradient utility and there are a few tailwind custom properties that are catching my eye. I am wondering if and how I can utilize the --tw-gradient-via css variable to extend the backgroundImage helper.

This is from line 2565-2578 /tailwindcss/packages/tailwindcss/src/index.ts (there is more to this but this is the meat)

  let gradientStopProperties = () => {
    return atRoot([
      property('--tw-gradient-from', '#0000', '<color>'),
      property('--tw-gradient-to', '#0000', '<color>'),
      property('--tw-gradient-from', 'transparent', '<color>'),
      property('--tw-gradient-via', 'transparent', '<color>'),
      property('--tw-gradient-to', 'transparent', '<color>'),
      property('--tw-gradient-stops'),
      property('--tw-gradient-via-stops'),
      property('--tw-gradient-from-position', '0%', '<length-percentage>'),
      property('--tw-gradient-via-position', '50%', '<length-percentage>'),
      property('--tw-gradient-to-position', '100%', '<length-percentage>'),
    ])
  }

This is the variable I am looking at specifically:

      property('--tw-gradient-via', 'transparent', '<color>'),

I am just curious as to the way these can be utilized in a tailwind.config, from what I have read in the tailwind codebase I believe I can simply use --tw-gradient-from/via/to as a valid css variable to extend the color utilities to a custom background gradient.

Now, there is a very real possibility that I am missing something therefore I haven't opened an issue and will wait for clarification prior to doing so. I also understand the ability to leverage the apply directive but my ideal preference is to remain stubborn and figure this out.

If this is a huge no-no and I should avoid using the frameworks native custom properties then that is not yet apparent to me.

---

Here's the issue I'm dealing with,

When I add this to my tailwind config it seems like it should work, but it does not.

backgroundImage: {
    "gradient-color-block": "linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-from) 33%, var(--tw-gradient-via) 33%, var(--tw-gradient-via) 66%, var(--tw-gradient-to) 66%, var(--tw-gradient-to) 100%)",
}

When we replace the variables with hardcoded hex values the gradient works as expected.

When using the --tw-gradient-via variable in my config it does not work.

--tw-gradient-from/to both work as expected but when we add --tw-gradient-via the gradient disappears from view. See below:

"gradient-color-block": "linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-from) 33%, var(--tw-gradient-via, #00ff00) 33%, var(--tw-gradient-via, #00ff00) 66%, var(--tw-gradient-to) 66%, var(--tw-gradient-to) 100%)"

This is how it is being used for those curious:

    <div className="bg-gradient-color-block from-green-500 via-purple-500 to-blue-500 h-10 w-full"></div>

when we add a fallback value to --tw-gradient-via the fallback value works and the gradient shows the from variable, to variable, and fallback via hex value.... What am I missing? How does Tailwind treat the --tw-gradient-via css variable?

This indicates (to me) an issue with the variable, and I might just need to go touch grass but it's -10 and snowing outside...

Any help would be hugely appreciated.

[wongjn]

It seems you are getting mixed up with Tailwind versions. The code that you quoted (in utilities.ts, not index.ts):

tailwindcss/packages/tailwindcss/src/utilities.ts

Lines 2565 to 2578 in cb17447

	let gradientStopProperties = () => {
	return atRoot([
	property('--tw-gradient-from', '#0000', '<color>'),
	property('--tw-gradient-to', '#0000', '<color>'),
	property('--tw-gradient-from', 'transparent', '<color>'),
	property('--tw-gradient-via', 'transparent', '<color>'),
	property('--tw-gradient-to', 'transparent', '<color>'),
	property('--tw-gradient-stops'),
	property('--tw-gradient-via-stops'),
	property('--tw-gradient-from-position', '0%', '<length-percentage>'),
	property('--tw-gradient-via-position', '50%', '<length-percentage>'),
	property('--tw-gradient-to-position', '100%', '<length-percentage>'),
	])
	}

Is in the next branch of Tailwind CSS, which corresponds to v4.

However, it seems you are using v3 from the JavaScript configuration snippets you have supplied. If we look at the v3 version of what CSS the via-* classses apply:

tailwindcss/src/corePlugins.js

Lines 1863 to 1878 in f1f419a

	matchUtilities(
	{
	via: (value) => {
	let transparentToValue = transparentTo(value)
	return {
	'@defaults gradient-color-stops': {},
	'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
	'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
	value
	)} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
	}
	},
	},
	options
	)

We can see that there is actually no --tw-gradient-via CSS property. Hence why you need to add a fallback value in your configuration for the gradient to appear.

[ethan-web-dev]

Thank you. That's what I was looking for.