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

anhchienvu profile image

Working with GitHub OAuth Authentication

AnhChienVu -

easyvipin profile image

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

Vipin Chandra -

tomj profile image

Web Images: Resize and Convert Perfectly (and Automatically)

Tom J. -

mike_andreuzza profile image

How to create and print an invoice Tailwind CSS

Michael Andreuzza -