@repobuddy/storybook 2.9.1 → 2.11.0

package/package.json

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

package/readme.md

@@ -135,16 +135,54 @@ export const preview: Preview = {
 }
 ```
 
-## Styles
+## Styling
 
-[`@repobuddy/storybook`][`@repobuddy/storybook`] uses Tailwind CSS 4 and the prefix `rbsb:` to avoid conflicts with user styles.
+[`@repobuddy/storybook`][`@repobuddy/storybook`] uses Tailwind CSS 4 with the prefix `rbsb:` and support `dark` variant.
 
-To use the styles, import `@repobuddy/storybook/styles.css`:
+Since how to control the dark variant is different in different projects,
+the pre-built `@repobuddy/storybook/styles.css` might not work for you.
 
-```ts
-import '@repobuddy/storybook/styles.css'
+Instead, you can use the `@repobuddy/storybook/tailwind.css` to build the stylesheet for your project.
+
+Let's say you are using it in your storybook (obviously),
+you need to separate your tailwind config and import them in your storybook.
+
+```tsx
+// .storybook/preview.tsx
+import './tailwind.css'
+import './tailwind.repobuddy-storybook.css'
+import '../tailwind.css'
 ```
 
+```css
+/* .storybook/tailwind.css */
+
+/* adding the layer "rbsb" is optional */
+@layer theme, base, components, rbsb, utilities;
+@import "tailwindcss/preflight.css" layer(base);
+```
+
+```css
+/* .storybook/tailwind.repobuddy-storybook.css */
+/* adding the layer "rbsb" is optional */
+@import "@repobuddy/storybook/tailwind.css" layer(rbsb);
+
+@source "../node_modules/@repobuddy/storybook/src/**";
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+```css
+/* tailwind.css */
+@import "tailwindcss/theme.css" layer(theme) prefix(app);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(app);
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Note that `@repobuddy/storybook/tailwind` is deprecated in favor of `@repobuddy/storybook/tailwind.css`.
+That convention better aligns with the Tailwind CSS 4 convention.
+
 [`@repobuddy/storybook`]: https://github.com/repobuddy/storybook
 [`storybook-addon-tag-badges`]: https://github.com/Sidnioulz/storybook-addon-tag-badges
 [`@storybook-community/storybook-dark-mode`]: https://github.com/repobuddy/@storybook-community/storybook-dark-mode

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,2 @@
+@import "tailwindcss/theme.css" layer(theme) prefix(rbsb);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(rbsb);