Search code examples
cssgulppostcsstailwind-csscssnext

Parse Error When Trying To Use theme() Inside calc()

I'm using Tailwind CSS with PostCSS via Gulp. Just about everything works great. I'm trying to reference values from the config theme object in my CSS. I'm able to do the following just fine:

height: theme('spacing.12');

However, when I try to use theme() inside of calc() (just like in the documentation):

height: calc(100vh - theme('spacing.12'));

I get a Parse error from gulp-postcss ("Expecting 'SUB', 'LPAREN'....")

Is this a Tailwind bug?

Solution

  • It turns out it was an issue in my tool chain. Specifically, I was using the node package postcss-cssnext - which it turns out is deprecated. Once I removed this from my Gulp file, the error went away:

    enter image description here