A way to process tailwind's theme('') function in sass during sass rendering so you can do things like { color: darken(theme('colors.blue.500')) }.

webpack.mix.js

/*

Usage with dart sass....

.header {
	color: color.scale(twColors('red.500'), $lightness: 20%) ;
}

*/



const mix = require('laravel-mix');
const tailwindConfig = require('./tailwind.config.js');
const sass = require("sass");
const get = require('lodash.get');
const tailwindcss = require("tailwindcss");

function hexToRgb(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
		r: parseInt(result[1], 16),
		g: parseInt(result[2], 16),
		b: parseInt(result[3], 16)
	} : null;
}

const sassOptions = {
	sassOptions: {
		functions: {
			'twColors($keys)': function(keys) {
				if (!(keys instanceof sass.types.String)) throw "twColors() Expected a string.";

				let value = get(tailwindConfig.theme.colors, keys.getValue());

				if (!value) throw `The tailwind config value ${keys} was not found.`;
				
				value = hexToRgb(value);

				return new sass.types.Color(value.r, value.g, value.b);
			},
		}
	}
}

mix.sass('resources/sass/app.scss', 'public/css', sassOptions);