Skip to content
On this page

Tailwind CSS example

In this example, we will see how to add Tailwind CSS to the stories.

CSS file

Make sure your project has a style file with the Tailwind directives.

/* src/tailwind.css */

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

Setup file

Histoire allows us to execute a setup file automatically when rendering the stories. This is useful to add global CSS files. Learn more

// src/histoire-setup.ts

import './tailwind.css'

We need to tell Histoire to use this file in the configuration file. Learn more

// histoire.config.ts

import { defineConfig } from 'histoire'

export default defineConfig({
  setupFile: '/src/histoire-setup.ts',

You can now use Tailwind utility classes in your stories (or import components using them)!

Released under the MIT License.