Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shorwood/tailwindcss-unsplash
TailwindCSS/WindiCSS plugin to apply unsplash.com images as background
https://github.com/shorwood/tailwindcss-unsplash
tailwindcss tailwindcss-plugin unsplash windicss windicss-plugin
Last synced: 6 days ago
JSON representation
TailwindCSS/WindiCSS plugin to apply unsplash.com images as background
- Host: GitHub
- URL: https://github.com/shorwood/tailwindcss-unsplash
- Owner: shorwood
- License: mit
- Created: 2022-02-16T15:13:06.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-02-18T16:28:00.000Z (over 2 years ago)
- Last Synced: 2024-10-23T01:18:38.314Z (13 days ago)
- Topics: tailwindcss, tailwindcss-plugin, unsplash, windicss, windicss-plugin
- Language: JavaScript
- Homepage:
- Size: 28.3 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Background Unsplash - Apply [unsplash.com](https://unsplash.com) images as background. (Plugins)
README
# Tailwind CSS Unsplash Background
[![Version][npm-version-shield]][npm]
[![Downloads][npm-stats-shield]][npm]
[![License][license-shield]][license]
## Introduction
TailwindCSS / WindiCSS plugin to easily apply background from unsplash.com into your CSS.
Tailwind CSS:
```html
```
Windi CSS:
```html
```
You can extract the ID like so:
- https://unsplash.com/photos/`2GjGnBizWuQ`
- https://images.unsplash.com/photo-`1645036993886-efdfd96ca97f`?ixlib=rb-1.2.1&fit=crop&w=735&q=80
When using the dynamic syntax, make sure you escape dashes:
- ❌ : `bg-unsplash-[1517411032315-54ef2cb783bb/64]`
- ✔️ : `bg-unsplash-[1517411032315\-54ef2cb783bb/64]`
## Installation
```bash
npm install -D tailwindcss-unsplash
```
```bash
yarn add -D tailwindcss-unsplash
```
```bash
pnpm add -D tailwindcss-unsplash
```
## Simple usage
```js
{
theme: {
unsplashImages: {
lyon: 'YMi66afAE3I',
stars: '4dpAqfTbvKA',
yosemite: 'zOXUvQ3Xo3s',
gradient: 'LeG68PrXA6Y',
},
unsplashResolutions: {
default: null, // --- Allows maximum available resolution by default.
xs: 480,
sm: 720,
md: 1280,
lg: 1920,
xl: 3840,
'2xl': 7680,
},
},
plugins: [
require('tailwindcss-unsplash'),
],
}
```
The plugin generates the following utilities:
```css
.bg-unsplash-[image-key] {
background-image: url(https://unsplash.com/photos/{image-id}/download;
}
.bg-unsplash-[image-key]-[resolution-key] {
background-image: url(https://unsplash.com/photos/{image-id}/download?w={resolution};
}
```
[npm]: https://www.npmjs.com/package/tailwindcss-unsplash
[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-unsplash.svg?style=flat-square
[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-unsplash.svg?style=flat-square
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/tailwindcss-unsplash.svg?style=flat-square