I'm trying to create a Svelte component library project that uses both Storybook and Tailwind CSS.

However the Tailwind CSS styles are not being applied when viewing in Storybook.

The component that I'm viewing in Storybook has the following style content as well as various Tailwind classes applied:

  <style global>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  </style>

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from "svelte-preprocess";
import autoPreprocess from 'svelte-preprocess';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';


const name = pkg.name
    .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
    .replace(/^\w/, m => m.toUpperCase())
    .replace(/-\w/g, m => m[1].toUpperCase());

export default {
    input: 'src/index.js',
    output: [
        { file: pkg.module, 'format': 'es' },
        { file: pkg.main, 'format': 'umd', name }
    ],
    plugins: [
        svelte({
            preprocess: autoPreprocess({
                postcss: true,
            }),
        resolve()
    ],
    preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
            plugins: [
                require("tailwindcss"),
                require("autoprefixer"),
            ],
        },
    }),
};

tailwind.config.js

const production = !process.env.ROLLUP_WATCH;
module.exports = {
  purge: {
    enabled: !process.env.ROLLUP_WATCH,
    content: ['./public/index.html', './src/**/*.svelte'],
    options: {
      defaultExtractor: content => [
        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
      ],
    },
    
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  
}