116 lines
4.1 KiB
Markdown
116 lines
4.1 KiB
Markdown
# Plan: Fix Button styles not loading in Storybook
|
|
|
|
## Context
|
|
|
|
The Button component in Storybook renders with **no styling** — buttons appear as plain HTML elements with default browser styles. The screenshot shows "Primary", "Outline Gold", "Outline Dark" etc. all as unstyled rectangles. The root cause is that Tailwind CSS utility classes are never being processed.
|
|
|
|
## Root cause analysis
|
|
|
|
The Button component (`src/components/Button/index.tsx`) uses Tailwind utility classes like:
|
|
- `w-btnPrimary`, `h-btn`, `bg-gold`, `text-amber`, `text-btnPrimary`, `font-bold`
|
|
- `rounded-btn`, `px-5`, `gap-2`, `flex`, `items-center`, `justify-center`
|
|
- `border-gold`, `border-black`, `border-white`, `border-danger`
|
|
- `hover:bg-amber`, `disabled:opacity-50`, etc.
|
|
|
|
But **none of these utilities are being generated** because:
|
|
|
|
1. **`tailwind.config.js` is not read by Tailwind v4.** Tailwind CSS v4 requires CSS-based configuration via the `@theme` directive. The JS config file is silently ignored.
|
|
|
|
2. **No CSS file imports Tailwind.** The Button component only imports `Button.scss` (which only defines border utilities, not Tailwind base/utilities). There is no `@import "tailwindcss"` anywhere in the source.
|
|
|
|
3. **`.storybook/preview.js` does not import any global CSS.** Storybook renders stories without any CSS entry point that would trigger Tailwind's utility generation.
|
|
|
|
## Fix
|
|
|
|
### 1. Create `src/styles/tailwind.css`
|
|
|
|
A CSS file that imports Tailwind and defines all custom design tokens using the `@theme` directive (v4 syntax):
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Colors */
|
|
--color-gold: #EABF2D;
|
|
--color-amber: #D4880F;
|
|
--color-black: #1A1A2E;
|
|
--color-danger: #DE3626;
|
|
--color-muted: #9AA0A6;
|
|
--color-gray: #6B6B7B;
|
|
--color-input-border: #DADCE0;
|
|
|
|
/* Border radius */
|
|
--radius-btn: 6px;
|
|
--radius-4px: 4px;
|
|
--radius-pill: 20px;
|
|
--radius-circle: 28px;
|
|
--radius-none: 0px;
|
|
|
|
/* Font sizes */
|
|
--text-btn: 11px;
|
|
--text-btnPrimary: 12px;
|
|
--text-btnNormal: 12px;
|
|
--text-btnCircular: 20px;
|
|
|
|
/* Heights */
|
|
--height-btn: 40px;
|
|
--height-btnLg: 60px;
|
|
--height-btnCircle: 56px;
|
|
--height-btnIcon: 36px;
|
|
|
|
/* Widths */
|
|
--width-btnPrimary: 170px;
|
|
--width-btnOutlineGold: 230px;
|
|
--width-btnOutline: 110px;
|
|
--width-btnOutlineLight: 140px;
|
|
--width-btnGhost: 110px;
|
|
--width-btnFileUpload: 200px;
|
|
--width-btnCircle: 56px;
|
|
--width-btnIcon: 36px;
|
|
|
|
/* Font family */
|
|
--font-family-sans: 'Source Sans Pro', system-ui, sans-serif;
|
|
}
|
|
```
|
|
|
|
Key changes from the old `tailwind.config.js`:
|
|
- `fontSize` → `--text-*` (v4 uses `text` not `fontSize`)
|
|
- `borderRadius` → `--radius-*` (v4 uses `radius` not `borderRadius`)
|
|
- `height` → `--height-*` (v4 uses `height` not `height`)
|
|
- `width` → `--width-*` (v4 uses `width` not `width`)
|
|
- `fontFamily` → `--font-family-*` (v4 uses `font-family` prefix)
|
|
- Font weight removed from text tokens (v4 handles fontWeight via `font-*` utilities)
|
|
- Changed font from `'sourcesanspro'` to `'Source Sans Pro'` (proper font name)
|
|
|
|
### 2. Update `.storybook/preview.js`
|
|
|
|
Import the Tailwind CSS file globally so all stories get the styles:
|
|
|
|
```js
|
|
import '../src/styles/tailwind.css';
|
|
|
|
export const parameters = {
|
|
// ... existing config
|
|
};
|
|
export const tags = ['autodocs'];
|
|
```
|
|
|
|
This ensures the `@import "tailwindcss"` in the CSS file is processed by PostCSS, generating all utility classes and applying the `@theme` design tokens.
|
|
|
|
## Files to modify
|
|
|
|
| File | Action |
|
|
|------|--------|
|
|
| `src/styles/tailwind.css` | **Create** — Tailwind import + `@theme` with all design tokens |
|
|
| `.storybook/preview.js` | **Modify** — Add `import '../src/styles/tailwind.css';` at the top |
|
|
|
|
## Verification
|
|
|
|
1. Run `npm run storybook` in the worktree
|
|
2. Open Storybook at `localhost:3000`
|
|
3. Check that the "Primary" story shows a styled gold button (not a plain rectangle)
|
|
4. Check that "Outline Gold" shows a button with gold border and amber text
|
|
5. Check that "Outline Dark" shows a button with black border
|
|
6. Check that "Ghost" shows a pill-shaped button with hover effects
|
|
7. Verify all 9 variants render with correct dimensions, colors, and typography
|