CSS fallback values from Tailwind config `extend` are missing

[claudiopedrom]

Hello,

In my project (styled-components w/ Tailwind CSS), I'm using the svh unit. As I still have to support some old browsers (Chrome 107), I'm extending the Tailwind config like this:

extend: {
  height: {
    screen: ["100vh", "100svh"],
  },
}

But I just noticed that the 100vh is never added to the final CSS. It always ends up in something like this:

.className {
  /* no 100vh value */
  height: 100svh;
}

It seems to work as expected in a "classic" Tailwind setup:

• https://play.tailwindcss.com/C1O5FqtQXP?file=config

Another way to reproduce this is by adding a utility, for example:

const plugin = require('tailwindcss/plugin')

// (...)

plugins: [
  plugin(function ({ addBase, addComponents, addUtilities, theme }) {
    addUtilities({
      '.foo': {
        color: ['red', 'blue'],
      }
    })
  })
],

When tw="foo" is used, only the blue color is present.

I was not able to find any issue regarding this. So, I'm not sure if it only happens to me or if there is something I need to change/update to make it work.

[ben-rogerson]

Hey there

As you've probably noticed - that the types indicate that an array is invalid for values on height:

So makes sense to me that the value shouldn't be allowed.

That said, it should work but we're working in JavaScript here and these styles are all placed within objects. In Javascript, duplicate keys are not allowed so producing css like this isn't possible:

I've yet to come up with a workaround on this - but please let me know if you come up with something.

[claudiopedrom]

Ah, yes, that makes sense. For now, I have created a "utility" class directly in the global CSS file. This is not the best solution, but it is a quick solution.