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!