Issue with processCssUrls: true

[puncoz]

I am using tailwindcss with laravel using laravel mix. And now i encounter a issue with processCssUrls: true options.

As per tailwindcss' documentation, we need to use following in laravel mix:

options({
    processCssUrls: false,
    postCss: [tailwindCss("./resources/assets/front/sass/tailwind.js")],
})

But with that processCssUrls: false my images and svgs url used in sass/scss dont comes to public directory. And if turned that true, ie. processCssUrls: true tailwind wont compiled.

[adamwathan]

I think your best option is to use absolute paths for all of your URLs instead of relative paths, if I remember what the feature does correctly.

Can you share an example of some CSS that doesn't work properly with that option disabled?

[puncoz]

Here's my custom sass which i include at last in app.scss where tailwindcss' preflight and other stuff included

li {
        &:before {
            content: '';
            background-repeat: no-repeat;
            background-size: 20px;
            width: 20px;
            height: 20px;
            display: inline-block;
            position: absolute;
            left: 0;
        }

        &.tick {
            &:before {
                background-image: url(./../../images/icons/ic-tick.svg);
            }
        }

        &.cross {
            &:before {
                width: 16px;
                height: 16px;
                top: 4px;
                background-image: url(./../../images/icons/ic-cross.svg);
                background-size: 16px;
            }
        }
    }

[adamwathan]

Got it, so what you want to do is write your image URLs relative the your web root, not relative to the Sass file you're in.

You probably want this:

li {
    &:before {
        content: '';
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: absolute;
        left: 0;
    }

    &.tick {
        &:before {
            background-image: url(/images/icons/ic-tick.svg);
        }
    }

    &.cross {
        &:before {
            width: 16px;
            height: 16px;
            top: 4px;
            background-image: url(/images/icons/ic-cross.svg);
            background-size: 16px;
        }
    }
}

...assuming your images are in /public/images/....

You'll need to put your public assets there yourself, as they won't be copied over.

[puncoz]

Yes exactly, I have all of my assets (images and other) in my resources/assets... directory. And previously with sass only (and of course without processCssUrls: false, those files gets copy automatically to the respective directory in public while compiling.

I can use .copy from the mix to copy all those things, but I am looking for something robust and cleaner way to do that.

[adamwathan]

Personally I just keep everything in public/img or similar from the beginning, so I don't need to copy anything over. It would be nice if we could use processCssUrls but unfortunately there's a long unsolved bug with that library and I don't think it's very actively developed at the moment.

[puncoz]

Yes, but in my case, I have the multi-theme implementation in my application. That means there will be a number of theme with different assets. And it will be messy if we need to look into two different directories for files (images and other media stuff in public and css and js files in resources).

Hence for now I decided to compile tailwind as a seperate css file with name tailwind.css and other custom sass files with name app.css

Here's my updated and working webpack.mix file

mix.postCss("resources/assets/front/sass/tailwind.css", "css/tailwind.css", [
    tailwindCss("./resources/assets/front/sass/tailwind.js"),
]).sass("resources/assets/front/sass/app.scss", "css/app.css").version()

Thank you for the help. :)

[vedmant]

I have the same issue, it's unfortunate that I can't use processCssUrls with tailwindcss.