DEV Community

Cover image for How to apply background image from Unsplash with Tailwind CSS
Malik
Malik

Posted on

How to apply background image from Unsplash with Tailwind CSS

#tailwindcss #html #unsplash #plugin

Install via your favorite package Manager:

NPM

npm install -D tailwindcss-unsplash
Enter fullscreen mode Exit fullscreen mode

Yarn

yarn add -D tailwindcss-unsplash
Enter fullscreen mode Exit fullscreen mode

PNPM

pnpm add -D tailwindcss-unsplash
Enter fullscreen mode Exit fullscreen mode

Register the plugin into the Tailwind CSS config file 

plugins: [require('tailwindcss-unsplash')],
Enter fullscreen mode Exit fullscreen mode

Add unsplashImages utility by register a name and the unsplash ID 

unsplashImages: {
 apple: 'wAygsCk20h8',
 stars: '4dpAqfTbvKA',
 yourName: 'sF4RV2lDtW0',
},
Enter fullscreen mode Exit fullscreen mode

eg: apple: 'wAygsCk20h8'

Add unsplashResolutions utility to set resolution parameter 

unsplashResolutions: {
 default: null,
 xs: 480,
 sm: 720,
 md: 1280,
 lg: 1920,
 xl: 3840,
 '2xl': 7680,
},
Enter fullscreen mode Exit fullscreen mode

And finally add the css class to your HTML tag 

<div class="bg-unsplash-[juJQdVYml78] w-96 h-96" />
<div class="bg-unsplash-[YMi66afAE3I/lg]" />
<div class="bg-unsplash-[YMi66afAE3I/1920]" />
Enter fullscreen mode Exit fullscreen mode

The plugin generates the following utilities
Plugin utilities

🔗 Sources

GitHub Repo
https://github.com/shorwood/tailwindcss-unsplash…

Unsplash
https://unsplash.com

Code Screenshot made with http://kod.so

Example Project on Tailwind CSS Play
https://play.tailwindcss.com/i0kWe5MaWs?file=config

Top comments (0)

Read next

harshalranjhani profile image

How to Center a Div in CSS - Simple Methods That Work

Harshal Ranjhani -

andrewelans profile image

Show full text on hover with text-overflow: ellipsis

Andrew Elans -

best_codes profile image

What's New in Tailwind v4 🚀

Best Codes -

finfin profile image

Implementing Dark Mode and Theme Switching using Tailwind v4 and Next.js

Fin Chen -