我正在尝试创建一个同时使用Storybook和Tailwind CSS的Svelte组件库项目。

但是,在Storybook中查看时不会应用顺风CSS样式。

我在Storybook中查看的组件具有以下样式内容以及应用的各种顺风类:

  <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"),
            ],
        },
    }),
};

顺风.图.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: [],
  
}