From 27ce800093e0bff6b7659841d791be1e74cc50b7 Mon Sep 17 00:00:00 2001 From: Harsh Gupta Date: Fri, 14 Nov 2025 02:03:50 +0530 Subject: [PATCH] docs: document wallet UI Tailwind dependency Add styling section to README explaining that the wallet connection UI relies on Tailwind-style utility classes and how to include them. --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 4957582..7684aec 100644 --- a/README.md +++ b/README.md @@ -9,3 +9,22 @@ With several templates to get you started, and auto generated code snippets. ## Local Development If you are running the project locally, you will need to set `NEXT_PUBLIC_IS_PLUGIN_DEV=true` in your `.env` file. + +## Styling & Wallet Connection UI + +The wallet connection modal in Jupiter Plugin relies on utility CSS classes +(similar to Tailwind CSS) for layout and spacing. If your host application +does not already include these styles, the wallet UI can appear broken or +misaligned. + +To avoid this: + +- If your app already uses Tailwind CSS, make sure your Tailwind build is + loaded on the page where you mount the plugin. +- If you are not using Tailwind, ensure your CSS provides equivalent utilities + for common layout classes such as flex, gap, alignment, spacing, rounded + corners and button styles (e.g. `flex`, `items-center`, `justify-between`, + `gap-*`, `px-*`, `py-*`, `rounded-*`, hover states, etc.). + +If you see a broken wallet connection UI, first verify that Tailwind (or +equivalent utility styles) is available on the page.