How to set a backgroundImage in Tailwind CSS without tailwind.config.js?

Use tailwind.config.js legacy JavaScript-based configuration

The question specifically refers to the removal of tailwind.config.js. From v4 onwards, the CSS-first configuration is the default, but you still have the option to use the legacy JS-based configuration through the @config directive.

• v4 is backwards compatible with v3 - Using tailwind.config.js by @config directive

The installation process, however, differs between v3 and v4.

• Tailwind CSS implementation inside React App

TailwindCSS v3

In v3, it's no longer enough to run npm install tailwindcss; you need to install a version-specific package. The init process must also be run, and the 3 @tailwind directive lines must be added to the CSS files.

• Install TailwindCSS with Vite - TailwindCSS v3 Docs

npm install tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

TailwindCSS v4

In v4, there's no need for PostCSS or Autoprefixer; instead, you should use the @tailwindcss/vite package. The init process has been removed since there's no need to create a tailwind.config.js file. Instead of the @tailwind directives, you only need to write @import "tailwindcss"; in the CSS file.

• Get started TailwindCSS with Vite - TailwindCSS v4 Docs
• Deprecated: Sass, Less and Stylus preprocessors support
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command
• Removed @tailwind directives
• Automatic Source Detection from TailwindCSS v4
• How to use TailwindCSS v4 & Vite without PostCSS
• Separated PostCSS plugin for TailwindCSS

npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react(),
  ],
})

index.css

@import "tailwindcss";

How to set background image?

The real focus of the question is setting the background image, and for this, there's actually no need for tailwind.config.js in either v3 or v4, as it can be done on its own.

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer base {
  .bg-sky {
    background-image: url(https://picsum.photos/300/300);
  }
}
</style>

<div class="bg-[url(https://picsum.photos/200/200)] w-32 h-32"></div>
<div class="bg-sky w-42 h-42"></div>

Or with tailwind.config.js in v3 (or in v4 by @config directive).

• Configuration Reference - TailwindCSS v3 Docs

// tailwind.config.js
tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        sky: 'url(https://picsum.photos/300/300)',
      }
    }
  }
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-[url(https://picsum.photos/200/200)] w-32 h-32"></div>
<div class="bg-sky w-48 h-48"></div>