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

Posted 2023-03-07

【中文标题】Tailwind 自定义表单插件不适用于 Svelte Rollup

【英文标题】：Tailwind custom forms plugin not working with 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 的表单样式不起作用。

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

【问题讨论】：

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

【参考方案1】：

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