{"id":13480196,"url":"https://github.com/shorwood/tailwindcss-unsplash","last_synced_at":"2025-07-08T01:13:35.621Z","repository":{"id":57146736,"uuid":"460057004","full_name":"shorwood/tailwindcss-unsplash","owner":"shorwood","description":"TailwindCSS/WindiCSS plugin to apply unsplash.com images as background","archived":false,"fork":false,"pushed_at":"2022-02-18T16:28:00.000Z","size":29,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-23T01:18:38.314Z","etag":null,"topics":["tailwindcss","tailwindcss-plugin","unsplash","windicss","windicss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shorwood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"shorwood"}},"created_at":"2022-02-16T15:13:06.000Z","updated_at":"2024-08-12T17:24:43.000Z","dependencies_parsed_at":"2022-09-06T13:02:04.529Z","dependency_job_id":null,"html_url":"https://github.com/shorwood/tailwindcss-unsplash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shorwood%2Ftailwindcss-unsplash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shorwood%2Ftailwindcss-unsplash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shorwood%2Ftailwindcss-unsplash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shorwood%2Ftailwindcss-unsplash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shorwood","download_url":"https://codeload.github.com/shorwood/tailwindcss-unsplash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788302,"owners_count":21161721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","tailwindcss-plugin","unsplash","windicss","windicss-plugin"],"created_at":"2024-07-31T17:00:35.584Z","updated_at":"2025-04-13T21:35:17.381Z","avatar_url":"https://github.com/shorwood.png","language":"JavaScript","funding_links":["https://github.com/sponsors/shorwood"],"categories":["Plugins"],"sub_categories":[],"readme":"# Tailwind CSS Unsplash Background\n\n[![Version][npm-version-shield]][npm]\n[![Downloads][npm-stats-shield]][npm]\n[![License][license-shield]][license]\n\n## Introduction\n\nTailwindCSS / WindiCSS plugin to easily apply background from unsplash.com into your CSS.\n\nTailwind CSS:\n```html\n\u003c!-- Using dynamic images --\u003e\n\u003cdiv class=\"bg-unsplash-[YMi66afAE3I]\" /\u003e\n\u003cdiv class=\"bg-unsplash-[YMi66afAE3I/lg]\" /\u003e\n\u003cdiv class=\"bg-unsplash-[YMi66afAE3I/1920]\" /\u003e\n\n\u003c!-- Using static images --\u003e \n\u003cdiv class=\"bg-unsplash-yosemite\" /\u003e\n\u003cdiv class=\"bg-unsplash-yosemite-lg\" /\u003e\n\u003cdiv class=\"bg-unsplash-yosemite-[1920]\" /\u003e\n```\n\nWindi CSS:\n```html\n\u003c!-- Dynamic with TailwindCSS --\u003e\n\u003cdiv class=\"bg-unsplash-YMi66afAE3I\" /\u003e\n\u003cdiv class=\"bg-unsplash-YMi66afAE3I-lg\" /\u003e\n\u003cdiv class=\"bg-unsplash-YMi66afAE3I-1920\" /\u003e\n\n\u003c!-- Image from theme --\u003e \n\u003cdiv class=\"bg-unsplash-yosemite\" /\u003e\n\u003cdiv class=\"bg-unsplash-yosemite-lg\" /\u003e\n\u003cdiv class=\"bg-unsplash-yosemite-1920\" /\u003e\n```\n\nYou can extract the ID like so:\n\n- \u003cb\u003eht\u003cspan\u003etps://unsplash.com/photos/`2GjGnBizWuQ`\u003c/b\u003e\n- \u003cb\u003eht\u003cspan\u003etps://images.unsplash.com/photo-`1645036993886-efdfd96ca97f`?ixlib=rb-1.2.1\u0026fit=crop\u0026w=735\u0026q=80\u003c/b\u003e\n\nWhen using the dynamic syntax, make sure you escape dashes:\n- ❌ : `bg-unsplash-[1517411032315-54ef2cb783bb/64]`\n- ✔️ : `bg-unsplash-[1517411032315\\-54ef2cb783bb/64]`\n\n## Installation\n\n```bash\nnpm install -D tailwindcss-unsplash\n```\n\n```bash\nyarn add -D tailwindcss-unsplash\n```\n\n```bash\npnpm add -D tailwindcss-unsplash\n```\n\n## Simple usage\n\n```js\n{\n  theme: {\n    unsplashImages: {\n      lyon: 'YMi66afAE3I',\n      stars: '4dpAqfTbvKA',\n      yosemite: 'zOXUvQ3Xo3s',\n      gradient: 'LeG68PrXA6Y',\n    },\n    unsplashResolutions: {\n      default: null, // --- Allows maximum available resolution by default.\n      xs: 480,\n      sm: 720,\n      md: 1280,\n      lg: 1920,\n      xl: 3840,\n      '2xl': 7680,\n    },\n  },\n  plugins: [\n    require('tailwindcss-unsplash'),\n  ],\n}\n```\n\nThe plugin generates the following utilities:\n\n```css\n.bg-unsplash-[image-key] {\n  background-image: url(https://unsplash.com/photos/{image-id}/download;\n}\n\n.bg-unsplash-[image-key]-[resolution-key] {\n  background-image: url(https://unsplash.com/photos/{image-id}/download?w={resolution};\n}\n```\n\n[npm]: https://www.npmjs.com/package/tailwindcss-unsplash\n[npm-version-shield]: https://img.shields.io/npm/v/tailwindcss-unsplash.svg?style=flat-square\n[npm-stats-shield]: https://img.shields.io/npm/dt/tailwindcss-unsplash.svg?style=flat-square\n[license]: ./LICENSE\n[license-shield]: https://img.shields.io/npm/l/tailwindcss-unsplash.svg?style=flat-square\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshorwood%2Ftailwindcss-unsplash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshorwood%2Ftailwindcss-unsplash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshorwood%2Ftailwindcss-unsplash/lists"}