Using config('colors') in SASS color functions

[diemah77]

I'm using tailwind with a third party UI framework. Within the tailwind config file I would like to set SASS color variables for that framework, e.g. something like this:

$ui-primary-color: darken(config('colors.blue'));

This won't work since config('colors.blue') is not available when the SASS color function is applied. So what is the best way to do so?

[adamwathan]

Using Tailwind's colors in your Sass is definitely tricky/impossible :/

I would recommend just maintaining a duplicate list of colors in both a Sass variables file and your Tailwind color palette if you want to access them from both places. Annoying to update two places but shouldn't really be too painful in practice.

Another option is to use Sass to generate CSS3 variables like:

:root {
  --blue: $color-blue;
  --blue-dark: darken($color-blue);
}

Then you can reference those same Sass variables in the other UI framework:

$ui-primary-color: $color-blue-dark;

Then in Tailwind, you can set your color palette to use those CSS3 variables instead of real values:

var colors = {
  'blue': 'var(--blue)',
  'blue-dark': 'var(--blue-dark)',
}

Then you could add the postcss-custom-properties plugin to your build chain, replacing CSS3 variables with their actual values:

https://github.com/postcss/postcss-custom-properties

This would allow you to keep all of the variables just defined in your Sass and reuse them in Tailwind.

Sort of convoluted but that's the best way I can think to do it.

[diemah77]

I think two color lists will do it. Thanks!

[brnpimentel]

Or inject color list with sass option like #79.

[illycz]

@adamwathan you solution working nice, but there is problem with negative Margin. Tailwind generate -var(--negativeMargin-sm) and postcss-custom-properties plugin don't replace this value.

Any suggestion?

Thanks!

[illycz]

@adamwathan I'm using negative values for margin for now, but maybe existing better solution...

[mannyyang]

Seems like I'm commenting on an old thread, but just in case anyone else needed some sort of tailwind config to scss variables utility, I whipped up a quick node script that takes in the tailwind config file and creates a scss variables file based on the defined configuration. The code below just creates a file based on the colors defined but can be adjusted to any properties defined in the config file.

const fs = require('fs');
const path = require('path');
const TailwindConfig = require('./tailwind.config');
const colors = TailwindConfig.colors;
const outPath = path.join(__dirname, 'theme-variables.scss');

// If the file exists, delete it.
fs.unlink(outPath, err => {
  if (err && err.code !== 'ENOENT') return console.error(err);

  // Iterate through the colors property of the tailwinds config
  // and create a scss variable for each color.
  Object.keys(colors).forEach(key => {
    let line = `$--${key}: ${colors[key]};\n`;

    fs.appendFile(outPath, line, err => {
      if (err) return console.error(err);

      console.log(`wrote ${key} color`);
    });
  });
});

From my tailwind configuration file, it created this scss file:

$--white: #ffffff;
$--white-three: #dcdcdc;
$--white-four: #fafafa;
$--white-six: #efefef;
$--pinkish-grey: #cecece;
$--transparent: transparent;
$--warm-grey: #9b9b9b;
$--warm-grey-two: #8e8e8e;
$--greyish: #adadad;
$--greyish-30: rgba(173, 173, 173, 0.3);
$--tiffany-blue: #74cfe7;
$--duck-egg-blue: #e8f4fc;
$--duck-egg-blue-light: #d6edf740;
$--black: #22292f;
$--slate-grey: #5c5e62;
$--seafoam-blue: #86cabd;;
$--light-olive-green: #a5ba52;
$--light-grey-blue: #a0c3d2;
$--squash: #f6a724;
$--blush: #f37777;
$--pale-olive: #bcd48a;
$--light-salmon: #ffa898;
$--wheat: #fabd79;
$--ecru: #eeffca;
$--primary: #74cfe7;
$--success: #a5ba52;
$--danger: #f37777;
$--warning: #f6a724;
$--info: #86cabd;;
$--light-grey: #9b9b9b;
$--grey: #5c5e62;
$--default: #5c5e62;

From here, you can just import this file in any of your scss files.

[bdrtsky]

Pretty frustrated that it's not working natively, but thanks for workarounds, guys!

[nicooprat]

Found a solution here: https://medium.com/@josh.pospisil/good-post-and-a-great-starting-point-d4b9fae0df63

It's using a SASS function declared in webpack config which can read the Tailwind config file. Looks like using config($keys) instead of get($keys) in the article offers a perfect "polyfill" for Tailwind in SASS! Still struggling with colors function though...

Edit: I got it working, I summarized it in a gist: https://gist.github.com/nicooprat/2753f44875d2894183a8d588d6e411c0

Edit: updated the gist to make it work with Tailwind 1.0

[dobromir-hristov]

You could also use this tool, it will export your configs to sass/less/stylus etc :) https://www.npmjs.com/package/tailwindcss-export-config