Original issue on Tailwind repo

Here's I'm using Vue-CLI to configure Webpack, but only this line is important.

The SASS loader is based on the work of @jlpospisil in this file.

Just made it work with Tailwind 1.0. See revisions for older versions compatible with beta.

This is such a handy script. Thank you very much :)

Hello,

It's a great idea.

But I'm using a laravelMix with webpack.mix.js and webpack.config.js. I dont know where should put this config:
sass: { functions: { 'theme($keys)': tailwindSassLoader.getConfigItem, }, }

my webpack.mix looks like:
`
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.sass', 'public/css')
.options({
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js')
]
})
.webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
mix.version();
}`

and webpack.config.js:
`
const path = require('path');

module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
}
};
`

Can you help me? thanks! :)

I never used Mix, but it looks like it should be added there:

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.sass', 'public/css')
.options({
+functions: { 'theme($keys)': tailwindSassLoader.getConfigItem },
processCssUrls: false,
postCss: [
tailwindcss('./tailwind.config.js')
]
})
.webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
mix.version();
}

Hello!

Yeah! thanks its works :)

Hi! Thanks for sharing.

This works for nuxt.js. Just import tailwindSassLoader into nuxt.config.js and the following configuration:

Thanks for sharing. any idea on how to use in Angular ?

Sorry, no idea!

A couple of things I want to add:

1. When using with Vite, the config is similar:

import { getConfigItem } from "./tailwind.sass"; 
// or const { getConfigItem }  = require('./tailwind.sass.js');

export default defineConfig({
    ...
    css: {
        preprocessorOptions: {
            scss: {
                functions: {
                    "theme($keys)": getConfigItem,
                },
            },
        },
    },
});

2. Later versions of node-sass (I'm on 9.0.0) have sass.types.Color deprecated and it doesn't seem to work. To fix that, replace the hexToRGBA function with this:

const hexToRGBA = (hex) => {
    const red = parseInt(hex.slice(1, 3), 16),
        green = parseInt(hex.slice(3, 5), 16),
        blue = parseInt(hex.slice(5, 7), 16);

    return {
        red,
        green,
        blue,
    };
};

https://stackoverflow.com/a/28056903/4633197

and then change the part of convertStringToSassDimension that handles the hex values to this:

if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(result)) {
    const rgba = hexToRGBA(result);
    return new SassColor(rgba);
}

The SassColor constructor only takes an object of red, blue, and green, and optional alpha: https://sass-lang.com/documentation/js-api/classes/sasscolor/

Thanks for sharing 🙏