hasparus · hasparus · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025
diff --git a/packages/tailwind/.gitignore b/packages/tailwind/.gitignore
@@ -0,0 +1 @@
+.vercel
diff --git a/packages/tailwind/README.md b/packages/tailwind/README.md
@@ -0,0 +1,68 @@
+# @hasparus/tailwind
+
+a small collection of Tailwind CSS plugins (like, literally one plugin rn)
+
+## innstallation
+
+```bash
+pnpm add @hasparus/tailwind
+bun add @hasparus/tailwind
+```
+
+## plugins
+
+### scrollview-fade
+
+Creates smooth fade effects at the edges of scrollable containers using CSS mask-image and scroll timeline.
+
+#### usage
+
+```html
+<div class="scrollview-fade scrollview-fade-x-16 overflow-auto"></div>
+<div class="scrollview-fade scrollview-fade-y-[4rem] overflow-scroll"></div>
+```
+
+#### setup
+
+in Tailwind 3 or Tailwind 4 with JS config
+
+```ts
+// tailwind.config.ts
+import { scrollviewFade } from "@hasparus/tailwind";
+
+export default {
+  // your Tailwind config
+  plugins: [scrollviewFade],
+};
+```
+
+in Tailwind 4 with CSS config
+
+```css
+@plugin "@hasparus/tailwind/scrollview-fade";
+```
+
+#### classes
+
+Use
+
+- **`.scrollview-fade`** - base class that applies the fade effect to a scrollable container
+
+Then either of
+
+- **`.scrollview-fade-x-{size}`** - sets horizontal fade size (e.g., `scrollview-fade-x-8`)
+- **`.scrollview-fade-y-{size}`** - sets vertical fade size (e.g., `scrollview-fade-y-12`)
+
+The `{size}` value can be any value from your Tailwind spacing scale or arbitrary length / percentage value.
+
+## Browser Support
+
+The scrollview-fade plugin requires browsers that support:
+
+- CSS Scroll-driven Animations
+- CSS `@property`
+- CSS `mask-image`
+
+This includes recent versions of Chrome/Edge (115+) and other Chromium-based browsers. Check [caniuse.com](https://caniuse.com/css-scroll-timeline) for current support.
+
+As of October 2025, Firefox needs `layout.css.scroll-driven-animations.enabled` setting for scroll timeline, but as nicer scrollviews are a progressive enhancement, it's not a blocker. Alternatively, one can use [scroll-timeline polyfill](https://github.com/flackr/scroll-timeline).
diff --git a/packages/tailwind/demo/.gitignore b/packages/tailwind/demo/.gitignore
@@ -0,0 +1 @@
+output.css
diff --git a/packages/tailwind/demo/README.md b/packages/tailwind/demo/README.md
@@ -0,0 +1,22 @@
+# demo
+
+this directory contains a demo of the `scrollview-fade` plugin
+
+## building
+
+first, build the plugin:
+
+```bash
+pnpm build
+pnpm build:demo
+open dist.html
+```
+
+This will generate `dist.html` which you can open in your browser.
+
+## Files
+
+- `index.html` - The demo HTML template
+- `input.css` - Tailwind CSS input with the plugin
+- `build.mjs` - Build script that processes CSS with PostCSS and Tailwind
+- `dist.html` - Generated output (gitignored)
diff --git a/packages/tailwind/demo/index.html b/packages/tailwind/demo/index.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@hasparus/tailwind</title>
+    <meta name="description" content="scrollview-fade demo with scroll-timeline and mask image gradients" />
+    <link href="./output.css" rel="stylesheet" />
+    <style>
+      body {
+        background: oklch(92.3% 0.003 48.717);
+        color: oklch(21.6% 0.006 56.043);
+      }
+      .card {
+        background: oklch(97% 0.001 106.424);
+        border: 1px solid oklch(86.9% 0.005 56.366);
+        border-radius: 0.5rem;
+        width: 300px;
+        height: 200px;
+        flex-shrink: 0;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          background: oklch(14.7% 0.004 49.25);
+          color: oklch(98.5% 0.001 106.423);
+        }
+        .card {
+          background: oklch(21.6% 0.006 56.043);
+          border-color: oklch(26.8% 0.007 34.298);
+        }
+      }
+    </style>
+  </head>
+  <body class="p-8 container mx-auto font-mono">
+    <div class="space-y-16">
+      <header>
+        <h1 class="text-lg font-mono font-bold mb-2">@hasparus/tailwind/scrollview-fade</h1>
+        <p>
+          scrollview-fade demo with scroll-timeline and mask image gradients
+        </p>
+        <a href="https://github.com/hasparus/eclectic/tree/main/packages/tailwind" class="mt-4 border-stone-400 dark:border-stone-700 border w-fit rounded-md pl-2.5 pr-3 py-1.5 flex items-center gap-2 hover:bg-stone-100 dark:bg-stone-900 dark:hover:bg-stone-800">
+          <svg viewBox="0 0 96 96" class="size-4 text-current -translate-y-px">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+              fill="currentColor"
+            />
+          </svg>
+          <span class="whitespace-pre text-sm font-medium">View on GitHub</span>
+        </a>
+      </header>
+
+      <section class="space-y-4 mt-8">
+        <h2 class="text-base">scrollview-fade scrollview-fade-x-16</h2>
+        <ul
+          class="scrollview-fade scrollview-fade-x-16 overflow-scroll flex gap-3"
+        >
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+        </div>
+      </section>
+
+      <section class="space-y-4 mt-8">
+        <h2 class="text-base font-mono">scrollview-fade scrollview-fade-y-16</h2>
+        <div class="flex">
+          <ul
+            class="scrollview-fade scrollview-fade-y-16 overflow-scroll h-64 rounded-lg flex flex-col gap-3 pr-4"
+          >
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+            <li class="card"></li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="space-y-4 mt-8">
+        <h2 class="text-base">scrollview-fade scrollview-fade-right-16</h2>
+        <p>useful for scrollviews with sticky/pinned items on one side</p>
+        <ul
+          class="scrollview-fade scrollview-fade-right-16 overflow-scroll flex gap-3"
+        >
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+          <li class="card"></li>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/packages/tailwind/demo/input.css b/packages/tailwind/demo/input.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "../dist/scrollview-fade.js";
diff --git a/packages/tailwind/demo/postcss.config.cjs b/packages/tailwind/demo/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@hasparus/tailwind",
+  "version": "1.1.0",
+  "description": "a very small collection of Tailwind plugins",
+  "type": "module",
+  "main": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hasparus/eclectic.git",
+    "directory": "packages/tailwind"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/index.js"
+    },
+    "./scrollview-fade": {
+      "require": "./dist/scrollview-fade.js"
+    }
+  },
+  "keywords": [
+    "tailwind",
+    "mask-image",
+    "scrollview",
+    "fade"
+  ],
+  "author": "@hasparus",
+  "license": "ISC",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "build:demo": "pnpm tailwindcss -i ./demo/input.css -o ./demo/output.css",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/node": "^24.9.1",
+    "@vitest/utils": "^4.0.3",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "tailwindcss": "^4.1.16",
+    "vitest": "^4.0.3"
+  }
+}
diff --git a/packages/tailwind/src/index.ts b/packages/tailwind/src/index.ts
@@ -0,0 +1,3 @@
+import scrollviewFade from "./scrollview-fade.js";
+
+export { scrollviewFade };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "tailwindcss";
		@plugin "../dist/scrollview-fade.js";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import scrollviewFade from "./scrollview-fade.js";

		export { scrollviewFade };