form input styles doesn't work properly

Form input styles doesn’t work properly, sometimes it works, sometimes it doesn’t and sometimes it works partially. Tested with the latest version of windicss + svelte-windicss-preprocess on the latest version of SvelteKit and Sapper.

How to reproduce the issue: 1 - set all the files listed below 2 - $ npm run dev 3 - manually refresh the page 4 - $ npm run build && npm run start 5 - manually refresh the page

svelte.config.cjs:

const sveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: [
    sveltePreprocess.typescript(),
    require('svelte-windicss-preprocess').preprocess({
      config: 'tailwind.config.cjs',
      compile: true,
      prefix: 'css-',
      globalPreflight: true,
      globalUtility: true,
    }),
  ],
  kit: {
    adapter: '@sveltejs/adapter-node',
    target: '#svelte'
  }
};

tailwind.config.cjs:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('windicss/plugin/forms')
  ],
}

src/components/Input.svelte:

<script>
  let css;
  export { css as class };
  export let placeholder;
</script>

<input type="text" {placeholder} class="{css} border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" />

src/routes/index.svelte:

<script>
  import Input from '$components/Input.svelte';
</script>

<form action="">
  <Input placeholder="component-input" class="block mt-1 ml-1 w-56" />
  <input type="text" placeholder="normal-input" class="block mt-1 ml-1 w-56 border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" />
</form>

screenshots:

[alexanderniebuhr]

closing this in favor of https://github.com/windicss/svelte-windicss-preprocess/issues/32 as this is not special to this case, but seems to be generic to plugins

[prab-it]

@alexanderniebuhr ok, let’s see if we can come up with a better solution. Thanks for your support! 😃