{"_id":"@bebeal/tailwind-glass","name":"@bebeal/tailwind-glass","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bebeal/tailwind-glass","version":"1.0.0","author":{"name":"Benjamin Noah Beal"},"description":"A Tailwind CSS plugin that adds a glass-like frosted transparency effect to any element","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bebeal/tailwind-glass.git"},"publishConfig":{"access":"public"},"keywords":["tailwindcss","tailwindcss-plugin","grid","dot","background"],"type":"module","main":"dist/src/index.js","types":"dist/src/index.d.ts","scripts":{"build":"tsc -p tsconfig.build.json","demo":"vite demo","prepublishOnly":"npm run build"},"devDependencies":{"@types/react":"^19.1.1","@types/react-dom":"^19.1.2","@vitejs/plugin-react":"^4.3.4","autoprefixer":"^10.4.21","postcss":"^8.5.3","react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^3.4.17","typescript":"^5.0.0","vite":"^6.2.6"},"dependencies":{"mini-svg-data-uri":"^1.4.4"},"_id":"@bebeal/tailwind-glass@1.0.0","gitHead":"1fd70351571163be6143f7637ecb28015f61e973","bugs":{"url":"https://github.com/bebeal/tailwind-glass/issues"},"homepage":"https://github.com/bebeal/tailwind-glass#readme","_nodeVersion":"20.15.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-M3j3BQhc74uExE0PSxs4w6/hCov2JTgCPdkMEfP9aoRIaEWRsYKrdfvotoWWSaRUxQE3eeX3B2WSwZUUoLTfZw==","shasum":"94ee0d55a6ad809e1c55d429ae5f16a948df4902","tarball":"https://registry.npmjs.org/@bebeal/tailwind-glass/-/tailwind-glass-1.0.0.tgz","fileCount":5,"unpackedSize":14607,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD3cud5gBQjpBrzbtzL83eZty5X3Jt/W2FhQaZCeZLgRAIhALsrrl1S21zlfQICV3pnQw1uiLsTH1dq7+jvsTJYtpF9"}]},"_npmUser":{"name":"bebeal","email":"bnoahbeal@gmail.com"},"directories":{},"maintainers":[{"name":"bebeal","email":"bnoahbeal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-glass_1.0.0_1744688031805_0.028242238059221325"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-15T03:33:51.743Z","1.0.0":"2025-04-15T03:33:52.015Z","modified":"2025-04-15T03:33:52.297Z"},"maintainers":[{"name":"bebeal","email":"bnoahbeal@gmail.com"}],"description":"A Tailwind CSS plugin that adds a glass-like frosted transparency effect to any element","homepage":"https://github.com/bebeal/tailwind-glass#readme","keywords":["tailwindcss","tailwindcss-plugin","grid","dot","background"],"repository":{"type":"git","url":"git+https://github.com/bebeal/tailwind-glass.git"},"author":{"name":"Benjamin Noah Beal"},"bugs":{"url":"https://github.com/bebeal/tailwind-glass/issues"},"license":"MIT","readme":"# @bebeal/tailwind-glass\n\nA Tailwind CSS plugin that adds a glass-like frosted transparency effect to any element.\n\n<kbd>\n  <div align=\"center\">\n    <img height=\"100%\" alt=\"Tailwind Glass Preview\" src=\"./demo/public/tailwind-glass.png\" />\n  </div>\n</kbd>\n\n## Installation\n\n```bash\nnpm install @bebeal/tailwind-glass --save-dev\n```\n\n## Usage\n\n### Tailwind v3\nAdd the plugin to your Tailwind configuration:\n\n```ts\n// tailwind.config.ts\nimport type { Config } from 'tailwindcss'\nimport GlassPlugin from '@bebeal/tailwind-glass'\n\nexport default {\n  theme: {\n    // ...\n  },\n  plugins: [\n    GlassPlugin,\n  ],\n} satisfies Config\n```\n\n### Tailwind v4\nUse the `@plugin` directive in your css file:\n\n```css\n@plugin '@bebeal/tailwind-glass';\n```\n\n### Available Classes\n\n- `glass-{spacing}`\n\n### Example\n\n```tsx\n<div className=\"bg-[url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1124&q=100')] bg-contain bg-no-repeat bg-center\">\n  <div className=\"glass h-[15rem] w-[20rem]rounded-md\" />\n</div>\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-c6fd9ec05d26ce13202b01adc729f3f8"}