Native/first-class Tailwind support for Sass

[jquense]

Hey folks, thought this may be interesting to folks who want or need to use Sass with Tailwind. I've written an interoperability layer between Sass and tailwind's theme and screen functions.

https://github.com/jquense/sass-tailwind-functions

It uses the Sass custom functions API which allows implementing native Sass functions in JS. like this:

$width: theme('padding.2');

@media #{screen(md)} {
  .btn {
    width: $width
  }
}

Note that this isn't just running tailwind before Sass, the theme function returns Sass values meaning you can manipulate them with other functions, add them, loop over them etc.

// manipulate colors
$hover-color: adjust-color(theme('colors.blue.400'), $alpha: 0.5);

// math on dimension values 
$height: theme('padding.3') * 2;

// theme objects or arrays return Sass maps and lists!
@each $name, $value in theme('spacing') {
  .square-#{e($name)} {
    width: $value;
    height: $height;
  }
}

Sass doesn't allow custom at rules so @apply and company aren't processed, however these features tend to work fine running after Sass as done it's thing, so existing wisdom of running PostCSS and tailwind after sass still holds, but this does remove the major expectation mismatch of not being able to use Sass syntax on theme values.