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)!