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

rajeshkumaryadavdotcom profile image

Bramus CSS Observer: Dynamically React to CSS Changes with JavaScript

Rajesh Kumar Yadav -

taliastorymaker profile image

What's the practical benefit of using <section>?

Talia -

vjygour profile image

Nextjs Nested Route/segment

Vijay Kumar -

areeb_anwar_813df06ee1124 profile image

Unlocking the Magic of Web Forms: What Are They and How Do They Work? 🧙‍♂️

WEBDEVTALES -