[v4] HTTP (remote) imports

[mbund]

What version of Tailwind CSS are you using?

v4.0.0-beta.3

What build tool (or framework if it abstracts the build tool) are you using?

Standalone CLI (from https://github.com/tailwindlabs/tailwindcss/releases)

What version of Node.js are you using?

N/A (using standalone CLI)

What browser are you using?

Firefox

What operating system are you using?

Linux

Reproduction URL

Use @import on a remote source, like @import "https://pastebin.com/raw/ctzSxFsQ";

Here is a link to a Tailwind playground with what I expect to work:
https://play.tailwindcss.com/n1z6Daungc?file=css

I expect it to remotely import a pastebin I created, which contains the following:

@theme {
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
}

Describe your issue

In Tailwind v4, the docs suggest that the built in @import resolution works with @theme and other tailwind specific directives. And it does, with local file imports. However, it is missing support for remote url imports. Currently, nothing happens when you import from an http url. The compiled output just leaves the import in (like the line @import "https://example.com/styles.css"; is in the compiled output directly, and is not fetched and inlined in). Now that the configuration file is "just" a css file, it feels like this should be possible.

I'm not sure what the desired behavior would be here. If it is intended that remote imports do not work, I think it should be documented.

I do have a use case for this, where I want a "base" theme configuration which my custom plugins to "inherit" from. It would be great to have the build and intellisense work with my base theme, without copy/pasting in the "base" into every plugin. (note that by plugin, I do not mean a tailwind plugin, but rather a plugin for my own app which can add its own markup that may include tailwind styles which need to be compiled).

[RobinMalfait]

Hey!

Right now we consider imports with remote URLs as something we don't bundle and keep in the CSS. While we could indeed download the imported file and embed it, there are some caveats to keep in mind:

1. Tailwind CSS is a built-time tool, this means that if you change the contents of the URL once your website is in production that your change won't be applied until you run another build.
2. Some remote URLs load different content depending on different factors. E.g.: fonts.google.com will produce slightly different results in Safari vs Chrome for the same font.

• https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto&display=swap produces different CSS and the linked fonts in the CSS file are also different depending on the browser.

If we would download the CSS then we loose these features.

To prevent confusion, especially around changing contents of a remote URL after you deployed, we decided to not do anything special here and rely on the browser to download the necessary resources.

---

To solve your use case, since a build is required, what you could do is download the remote file to a local file and import the generated file. If you do this as part of a build step, then you still have the benefit of sharing the contents between projects.

[mbund]

Thanks for the detailed response and explanation! I've implemented your suggestion for my use case and it works great!