Tailwind 自定义表单插件不适用于 Svelte Rollup答案

【问题标题】：Tailwind custom forms plugin not working with Svelte RollupTailwind 自定义表单插件不适用于 Svelte Rollup
【发布时间】：2021-03-17 06:27:05
【问题描述】：

我有这个汇总配置：

...
import tailwind from "tailwindcss";

...

export default {
  ...
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        postcss: {
          plugins: [tailwind("./tailwind.config.js")],
        },
      }),
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),

    css({ output: "bundle.css" }),

    resolve({
      browser: true,
      dedupe: ["svelte"],
    }),
    commonjs(),
    typescript({
      sourceMap: !production,
      inlineSources: !production,
    }),

    !production && serve(),
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

还有这个tailwind.config.js 文件：

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  purge: {
    content: ["./src/**/*.svelte", "./public/**/*.html"],
    css: ["./public/**/*.css"],
    enabled: production, // disable purge in dev
  },
  darkMode: "class",
  theme: {
    customForms: (theme) => ({
      default: {
        "input, textarea": {
          "&::placeholder": {
            color: theme("colors.gray.400"),
          },
        },
      },
    }),
    ...
  },
  plugins: [require("@tailwindcss/forms")],
};

我让它在 Docker 容器中运行。通过使用自定义的 TailwindCSS.svelte 组件可以很好地应用 Tailwind 样式，该组件被导入到 App.svelte 然后在那里应用。

但是this plugin 的表单样式不起作用。

任何人有什么想法吗？这是因为汇总配置吗？

【问题讨论】：

我面临同样的问题。运气好吗？

标签： svelte rollup tailwind-css

【解决方案1】：

如果您使用标准的 svelte 模板并希望使用 @tailwindcss/forms，请确保您已清理 public/global.css 中的样式，因为它们会覆盖某些 @tailwindcss/forms 设置。

【讨论】：