title: Svelte component library with Storybook and Tailwind - css not being applied
body: <p>I'm trying to create a Svelte component library project that uses both Storybook and Tailwind CSS.</p>
  <p>However the Tailwind CSS styles are not being applied when viewing in Storybook.</p>
  <p>The component that I'm viewing in Storybook has the following style content as well as various Tailwind classes applied:</p>
  <pre><code>  &lt;style global&gt;
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
    &lt;/style&gt;
  </code></pre>
  <h1>rollup.config.js</h1>
  <pre><code>import svelte from 'rollup-plugin-svelte';
  import sveltePreprocess from &quot;svelte-preprocess&quot;;
  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 =&gt; m.toUpperCase())
      .replace(/-\w/g, m =&gt; 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(&quot;tailwindcss&quot;),
                  require(&quot;autoprefixer&quot;),
              ],
          },
      }),
  };
  </code></pre>
  <h1>tailwind.config.js</h1>
  <pre><code>const production = !process.env.ROLLUP_WATCH;
  module.exports = {
    purge: {
      enabled: !process.env.ROLLUP_WATCH,
      content: ['./public/index.html', './src/**/*.svelte'],
      options: {
        defaultExtractor: content =&gt; [
          ...(content.match(/[^&lt;&gt;&quot;'`\s]*[^&lt;&gt;&quot;'`\s:]/g) || []),
          ...(content.match(/(?&lt;=class:)[^=&gt;\/\s]*/g) || []),
        ],
      },
      
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    future: {
      purgeLayersByDefault: true,
      removeDeprecatedGapUtilities: true,
    },
    plugins: [],
    
  }
  </code></pre>