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

 pnpm create vite

Navigate to your project directory and install the required dependencies.

cd my-project
pnpm install

Step 2: Integrating Tailwind CSS

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

pnpm install -D tailwindcss postcss autoprefixer

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

pnpm dlx tailwindcss init -p

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

/** @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

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3: Setting Up Storybook

1. Initialize Storybook if you haven't already:

pnpm dlx storybook@latest init

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

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.

pnpm add -D @storybook/addon-themes

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

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

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!