How to Use Tailwind Image Background on Next Js

Next Js is one of the most popular web application frameworks with react-based language. Tailwind, on the other hand, is used by a lot of developers for easier use of CSS by only using a set of classes directly to the DOM.

Prerequisites

I will assume that you already have knowledge in Tailwind and NextJs. To follow this tutorial, you also need a Next Js project with Tailwind installed.

Step 1 — Copy the Image to Public Folder

Firstly, you need to prepare the image and copy it into the public folder, so your file structure will look like this:

./
└── next-web/
    ├── README.md
    ├── next-env.d.ts
    ├── next.config.mjs
    ├── node_modules/
    ├── package.json
    ├── postcss.config.mjs
    ├── public/
    │   ├── hero-bg.png <----- THIS IS YOUR IMAGE
    │   ├── next.svg
    │   └── vercel.svg
    ├── src/
    ├── tailwind.config.ts
    ├── tsconfig.json
    └── yarn.lock

Option 1 — Using Tailwind Arbitrary Value

Tailwind provides us with a very useful utility that allows us to create a custom value for the styling by directly injecting the value on the class list.

We can use brackets “[]” on the class name to inject the value.

For this case, we can use the bg-... class and CSS URL utility, it will look like this:

bg-[url("your-image-path")]

Your code will look like this:

const Hero = () => {
  return (
    <div className='... bg-[url("/hero-bg.jpg")]'>
      ...
    </div>
  )
}

After refreshing the page, your page will look like this. Tailwind will add the image into the background via URL.

Option 2 — Create a Custom Styling

Arbitrary value is good for quick styling, but it will be a mess if you have a long name for the file, or if you want to re-use the background image. By creating a custom styling you can use a custom class name and re-use it anytime on any components of your project.

First, you need to open your tailwind config file on the root. This file is called “tailwind.config.ts”.

You will see a default config like this:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

You can see that Tailwind has already given us an example of how to use a theme extension for a background image.

theme: {
  extend: {
    backgroundImage: {
      "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
      "gradient-conic":
        "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
    },
  },
},

In this case, Tailwind has created a custom class for a gradient. We can delete the gradient-radial and gradient-conic objects and replace them with our own.

backgroundImage: {
  "hero-image": "url('/hero-bg.jpg')"
},

So, the final config will looks like this

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "hero-image": "url('/hero-bg.jpg')"
      },
    },
  },
  plugins: [],
};
export default config;

After saving the config, you can use the custom class on your component

const Hero = () => {
  return (
    <div className='... bg-hero-image'>
      ...
    </div>
  )
}

This will give the same result

Conclusion

Using Tailwind CSS will make your front-end development much easier, yet, you still should have a good understanding of how CSS works. Using a custom image for the background in Tailwind is easy, you can utilize the arbitrary values in Tailwind to inject the URL directly. Another option to use a background image is by using custom styling to create a custom class. By using this technique, you can re-use the class on your other component, so you don't need to re-type the URL again and again.

Thank you and happy coding!