How to Use Images in This Setup (Local + Netlify)

Using images in a Tailwind + HTML project works much like any static site, but the build process affects how images must be organized — especially when deploying to Netlify.

1. Place Images Inside Your Project Folder

Images must live in a folder that will be included in the final build. Two common approaches are:

Option A — `public/` folder Prefered method


project/
public/
  images/
    logo.png
src/
index.html

Anything placed inside public/ is copied directly into the output build folder. This makes public/ the safest place for images when using Tailwind, Vite, Webpack, or other bundlers.

Option B — `images/` next to HTML files


project/
images/
  hero.jpg
index.html

This works fine if you are not using a bundler. But in projects using Vite or Webpack, images outside public/ may require special configuration. For this reason, public/ is generally preferred.

2. Reference Images in HTML

For images in public/images/, use a leading slash so Netlify serves them from the site root:

<img src="/images/photo.jpg" alt="Photo">

Use standard relative paths if your images sit next to the HTML files:

<img src="images/photo.jpg" alt="Photo">

3. Reference Images in CSS (Tailwind or Custom CSS)

Traditional CSS background image:

.hero {
        background-image: url('/images/hero.jpg');
      }

Tailwind utility background image:

<div class="bg-[url('/images/hero.jpg')] h-64"></div>

Note: Tailwind may purge unused classes. If a background class is dynamically generated, safelist it in tailwind.config.js.

Following these approaches ensures images work both locally and on Netlify. Using the public/ folder is the most reliable option, and referencing images from the root (/) prevents broken paths in production.