Usage with Tailwind?

[titantwentyone]

Hello. First of all, thanks for the plugin. I am looking to integrate this into my tailwind config so that I can generate images at build time, obtain the src and inject this into my tailwind.config.js before my CSS is compiled. As per this question on Stack Overflow, I have converted my tailwind set up for ES so that I can import an image. My vite.config.js is:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import imagePresets, { widthPreset } from 'vite-plugin-image-presets';
import postcss from './postcss.config.js'

export default defineConfig({
    css: {
      postcss
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true
        }),
        imagePresets({
            banner: widthPreset({
                widths: [1920],
                formats: {
                    jpg: {quality: 70}
                }
            })
        }),
    ],
    resolve: {
        alias: {
            'images:': '/resources/images'
        }
    }
});

My postcss is:

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindConfig from './tailwind.config.js'

export default {
    plugins: [tailwind(tailwindConfig), autoprefixer],
}

And my (truncated) tailwind.config.js is:

import bg_image from './resources/images/image.jpeg?preset=banner';

export default {
    ...
    theme: {
        extend: {
            backgroundImage: {
                forest: "url('" + bg_image.src + "')"
            }
        }
    }
    ...
}

The error I am getting is:

tailwind.config.js:12:22: ERROR: No loader is configured for ".jpeg" files: resources/images/image.jpeg?preset=banner

I'm not sure it is even possible to achieve what I'm looking to do but I am ever hopeful! I'm very new to Vite and no JS expert so apologies if I am missing something obvious (this is very likely!)!

[ElMassimo]

Hi! Unfortunately that import wouldn't be transformed, as it's in the Vite config, and thus won't be processed by any Vite plugins (including this one).

[titantwentyone]

Thanks for the response. That makes sense. Is there another strategy that you think is worth investigating?

[ElMassimo]

You could have the import in the script setup of a Vue layout, use v-bind in the style tag (which will define a CSS variable automatically), and use that to create a global CSS rule like bg-forest that you can use throughout the app.

[titantwentyone]

I'm not using Vue with this particular project but good idea for future projects. I am using Alpine however. I don't have a solution for this off the top of my head but if I find a nice clean way, I'll post it back here. Thanks again.

[ElMassimo]

Instead of a CSS variable, you can set the style and background-image in the same way, though you wouldn't be able to apply it as a class.

[titantwentyone]

Yeh. That was another option that was floating around and may be the solution I go with for now.

I'm really new to Vite but was wondering if there is a way to set the key for an asset in the manifest. That way, it is always predictable. For example, currently, my manifest has an entry for my image:

...
  "image.f9876595.jpeg": {
    "file": "assets/image.f9876595.jpeg",
    "src": "image.f9876595.jpeg"
  }
...

But if this were to change so that the key is predictable:

...
  "image.banner.jpeg": {
    "file": "assets/image.f9876595.jpeg",
    "src": "image.f9876595.jpeg"
  }
...

I can reference it anywhere (I think!) I assume the manifest is created in-memory when running dev.

I may be completely misunderstanding how Vite works here - just sounding out ideas.