TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |html |unsplash |plugin

How to apply background image from Unsplash with Tailwind CSS

maliksvd

Malik

Posted on March 10, 2022

How to apply background image from Unsplash with Tailwind CSS

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

💖 💪 🙅 🚩
maliksvd
Malik

Posted on March 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to apply background image from Unsplash with Tailwind CSS
tailwindcss How to apply background image from Unsplash with Tailwind CSS

March 10, 2022