@repobuddy/storybook 2.9.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobuddy/storybook",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "Storybook repo buddy",
   "keywords": [
     "storybook",
@@ -39,6 +39,9 @@
       "types": "./esm/storybook-dark-mode/index.d.ts",
       "default": "./esm/storybook-dark-mode/index.js"
     },
+    "./tailwind": {
+      "style": "./tailwind.css"
+    },
     "./styles.css": "./styles.css"
   },
   "files": [
@@ -46,6 +49,7 @@
     "esm",
     "src",
     "styles.css",
+    "tailwind.css",
     "!**/*.{spec,test,unit,accept,integrate,system,perf,stress,study,stories}.*",
     "!**/*.mdx"
   ],

package/readme.md

@@ -139,10 +139,15 @@ export const preview: Preview = {
 
 [`@repobuddy/storybook`][`@repobuddy/storybook`] uses Tailwind CSS 4 and the prefix `rbsb:` to avoid conflicts with user styles.
 
-To use the styles, import `@repobuddy/storybook/styles.css`:
+To use the styles, import `@repobuddy/storybook/tailwind` in your Tailwind config:
 
-```ts
-import '@repobuddy/storybook/styles.css'
+```css
+/* tailwind.css */
+@import "tailwindcss";
+@import "@repobuddy/storybook/tailwind";
+
+/* specify your dark variant mechanism */
+@custom-variant dark (&:where(.dark, .dark *));
 ```
 
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook

package/styles.css

@@ -1,6 +1,5 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
-@layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
     --rbsb-color-red-100: oklch(93.6% 0.032 17.717);

package/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/theme.css" layer(theme) prefix(rbsb);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "src/**";