Prefix configuration does not work

[lamualfa]

Setup 1 (Not Work)

windiCSS({
  config: {
    prefixer: true,
    prefix: 'lamualfa',
  },
});

---

Setup 2 (Not Work)

windiCSS({
  prefixer: true,
  prefix: 'lamualfa',
});

---

Setup 3 (Not Work)

windiCSS({
  compile: true,
  prefixer: true,
  prefix: 'lamualfa',
});

How do i setting the prefix config?

Environment

• vite: v2.0.5
• vite-plugin-windicss: v0.7.2
• svelte: v3.35.0

Reference

• https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
• https://github.com/windicss/windicss/blob/main/src/interfaces.ts

[hannoeru]

Can you provide more context?

[lamualfa]

I use this template svelte-routify-windi-vite with updated dependencies as described in Environment section and with configuration above.

[schelmo]

just tested this with

windiCSS({
  prefixer: true,
  prefix: 'lamualfa',
});

your classes are now for example: lamualfatext-red-500
this works with the latest svelte-routify-windi-vite template
maybe you want a hypen (for better readability) ? prefix: 'lamualfa-'

[hannoeru]

I think prefixer is default to true and not related to prefix, so you can remove it.

[lamualfa]

@schelmo @hannoeru Ok. Thanks bro. I will check it now.

[lamualfa]

@schelmo I have been tested with the latest version of svelte-routify-windi-vite, but it's still not work in build mode.

The output of the CSS file in dist directory after i run pnpm build command.

.py-4, .text-4xl, .text-center and etc is not changed.

---

Here are some of the configurations I have tried

Config 1 (Not work)

vite.config.ts

      windiCSS({
        //@ts-ignore
        verbose: true,
        silent: false,
        debug: true,
        config: "tailwind.config.js", // tailwind config file path (optional)
        compile: true, // false: interpretation mode; true: compilation mode
        prefixer: true,
        prefix: "windi-", // set compilation mode style prefix
        globalPreflight: true, // set preflight style is global or scoped
        globalUtility: true, // set utility style is global or scoped
      }),

---

Config 2 (Not work)

vite.config.ts

      windiCSS({
        //@ts-ignore
        verbose: true,
        silent: false,
        debug: true,
        config: "tailwind.config.js", // tailwind config file path (optional)
        compile: false, // false: interpretation mode; true: compilation mode
        prefixer: true,
        prefix: "windi-", // set compilation mode style prefix
        globalPreflight: true, // set preflight style is global or scoped
        globalUtility: true, // set utility style is global or scoped
      }),

---

Config 3 (Not work)

I try to move the config to the tailwind.config.js file

tailwind.config.js

module.exports = {
  compile: true, // false: interpretation mode; true: compilation mode
  prefixer: true,
  prefix: 'windi-', // set compilation mode style prefix
  theme: {
    extend: {
      colors: {
        reepolee: {
          500: '#b40000',
          600: '#9c0000',
          700: '#750000',
        },
      },
    },
  },
};

---

I use PNPM for the package manager. Does it matter?

[schelmo]

pnpm should be no problem.
Did you change the classes in your html to have the windi- prefix?
windicss is also generating the classes without prefix, if they are found in the html.
if you use a tailwind.config.js, you should put the prefix configuration there.
i made a commit here so you can compare:
schelmo/svelte-routify-windi-vite@cdedd49

[lamualfa]

@schelmo

Did you change the classes in your html to have the windi- prefix?

i want that. but i don't do it manually. i want Windi CSS to do it automatically in build mode.

---

if you use a tailwind.config.js, you should put the prefix configuration there.

I've tried it. but still not working.

---

i made a commit here so you can compare:

Ok, thanks. I will try it.