# The Ultimate Guide to Dark Mode with Vite, React, and Tailwind in Storybook 2023

As developers, we're no strangers to the challenges of ensuring our components look impeccable in both light and dark mode. With the latest features of Tailwind CSS and Storybook as our testing playground, we're about to turn those challenges into triumphs.

### **Step 1: Setting Up Your Vite Project**

```bash
 pnpm create vite
```

**Navigate to your project directory** and install the required dependencies.

```bash
cd my-project
pnpm install
```

### **Step 2: Integrating Tailwind CSS**

1. We need to install Tailwind CSS in our project.
    

```bash
pnpm install -D tailwindcss postcss autoprefixer
```

1. Generate `tailwind.config.js` and `postcss.config.js` files
    

```bash
pnpm dlx tailwindcss init -p
```

1. **Configure Tailwind** by updating `tailwind.config.js` , setting the darkMode.
    

```javascript
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class', '[data-mode="dark"]'],
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

1. **Inject Tailwind into your main CSS** at `/src/index.css`
    

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### **Step 3: Setting Up Storybook**

1. **Initialize Storybook** if you haven't already:
    

```bash
pnpm dlx storybook@latest init
```

1. **Integrate Tailwind** by importing its CSS into the `/.storybook/preview.ts`
    

```typescript
import 'tailwindcss/tailwind.css' // <-- HERE
import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;
```

You can now utilize Tailwind within Storybook. Let's proceed with configuring the dark mode.

1. Add `@storybook/addon-themes` to the project.
    

```bash
pnpm add -D @storybook/addon-themes
```

1. Add the new theme to the main.ts in Storybook `/.storybook/main.ts`
    

```typescript
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-themes", // <-- HERE
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;
```

1. Add the themes in the preview file `/.storybook/preview.ts`
    

```typescript
import 'tailwindcss/tailwind.css'
import type { Preview } from "@storybook/react";
import { withThemeByClassName } from '@storybook/addon-themes'

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    withThemeByClassName({
      themes: {
        light: 'light',
        dark: 'dark',
      },
      defaultTheme: 'light',
    }),
  ],
}

export default preview
```

Happy coding!