Блог

У меня есть эта конфигурация rollup:

 ...
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 amp;amp; serve(),
    !production amp;amp; livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production amp;amp; 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": {
          "amp;::placeholder": {
            color: theme("colors.gray.400"),
          },
        },
      },
    }),
    ...
  },
  plugins: [require("@tailwindcss/forms")],
};
 

У меня он запущен в контейнере Docker. Стили Tailwind отлично применяются с помощью пользовательского TailwindCSS.svelte компонента, который импортируется App.svelte и затем применяется там.

Однако стиль формы с помощью этого плагина не работает.

У кого-нибудь есть идеи? Это связано с конфигурацией rollup?

Если вы используете стандартный шаблон svelte и хотите использовать @tailwindcss/forms , пожалуйста, убедитесь, что вы очистили стили, public/global.css потому что они переопределяют некоторые @tailwindcss/forms настройки.