Is there any way to hoist base rules to the top of the stylesheet in the Tailwind plugin system?

[jamespantalones]

I'm trying to create a plugin for my org that contains a css @import rule. In order for that rule to work, it needs to be at the top of the stylesheet.

I wanted to have an optional plugin handle this... However, the injection spot is quite a ways down. Is there any way to get this to the top?

export const FontImport = plugin.withOptions(function (options) {
  return function ({ addBase }) {
    addBase({
      "@import url('https://assets.bw.io/font-service/css/HaasText:*/styled-font-face.css')":
        "",
    });
  };
});

[adamwathan]

Currently not I'm afraid but this is a good point! We could probably add a step that sorts @import rules to the top of the file automatically so you don't have to think about this.

You could write a pretty simple PostCSS plugin to handle this though in the mean time, just make sure it runs after Tailwind 👍

[jamespantalones]

thanks, that would be super useful. in the meantime, will add a postcss plugin. 🎷

[MattJonesSiteglide]

Might there be a newer answer to this question for Tailwind v4? Where instead of plugins, when we have nested imports e.g.

/* a.css */
@import "./b.css";
@import "./c.css";

/* b.css */
@theme {
  --color-primary-50: oklch(98.07% 0.0156 154.48);
}

/* c.css */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@theme {
  --font-sans: "Bricolage Grotesque", "sans-serif";
  }

/* input.css */
@import "./a.css";
@import "tailwindcss";