3

Using Vite/React/Tailwind, I am trying to set dev/prod workflow so that images stored in 'public' directory has the correct path when deployed to gh-pages. Below is my Tailwind config starting point where 'backgroundImages' property is referencing an image file stored in 'public'.

module.exports = {
  mode:'jit',
  content: ["./src/**/*.{html,jsx}"],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'splash-hex': '#6BD1D2',
      'splash-rgba': 'rgba(107, 209, 210,1.0)',
      'splash-hsla': 'hsla(181, 53%, 62%, 1.0)',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    backgroundImages:{
      'default':'url("./10475996-3x2-940x627.jpeg")'
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  prefix: 'tw-',
  plugins: [],
}

In dev this works fine.

http://localhost:3000/10475996-3x2-940x627.jpeg

In 'dist' folder, it looks correct as well when 'build' is run.

enter image description here

When deployed to gh-pages, the path changes to /assets/ and the image is no longer served from root as I expected according to Vite.

https://unevenartwork.com/assets/10475996-3x2-940x627.jpeg

Is there a configuration that would suppress the /assets/ on deploy or another solution?

apo11oCreed
  • 159
  • 3
  • 14

1 Answers1

1

The solution to this issue has two parts.

First, as shown in this answer, on build or deploy command, Rollup will create the output directories when set in the config. Just place the image assets in src/img folder as a target for Rollup to output to dist folder.

Then, in Tailwind config, be sure to make a reference to the parent directory in the asset path - ../img/10475996-3x2-940x627.jpeg instead of ./img/10475996-3x2-940x627.jpeg. This helps Vite make the correct path association to the parent directory.

It appears this is effective for properties defined in Tailwind theme extensions. No issues experienced with img src attribute values.

apo11oCreed
  • 159
  • 3
  • 14