AwsmBuff•2y ago

Fresh: How to make Styles global with twindv1?

With the new twind-Plugin (v1), does anybody know how to do global styles? It was preflight before, but it does not seem to work like that anymore. I am trying for quite some time now to use injectGlobal and searching about both versions (through repos, documentations and forums) but I can not make it. Does anyone have an example or a suggestion do it in another way? 🥺 A solution would safe me hours of trial-and-error.

1 Reply

AwsmBuffOP•2y ago

It took me a while but I finally found a Discord message showing an example how to use preflight now. You have to give it a css-js-object. Here is an example:

export default {
  ...defineConfig({
    presets: [
      presetAutoPrefix(),
      presetTailwind(),
    ],
    preflight: {
      "h1": {
        "@apply": "text-4xl font-extrabold tracking-tight dark:text-white",
      },
      "h2": { "@apply": "my-2 text-3xl font-bold dark:text-white" },
    },
  }),
  selfURL: import.meta.url,
} as Options;

export default {
  ...defineConfig({
    presets: [
      presetAutoPrefix(),
      presetTailwind(),
    ],
    preflight: {
      "h1": {
        "@apply": "text-4xl font-extrabold tracking-tight dark:text-white",
      },
      "h2": { "@apply": "my-2 text-3xl font-bold dark:text-white" },
    },
  }),
  selfURL: import.meta.url,
} as Options;

I hope it helps!