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

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

// src/poveste-setup.ts

import './tailwind.css'

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

// poveste.config.ts

import { defineConfig } from 'poveste'

export default defineConfig({
  setupFile: '/src/poveste-setup.ts',
})

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