support for relative imports in tailwind

Author: oscarotero

CHANGELOG.md

@@ -9,6 +9,7 @@ Go to the `v1` branch to see the changelog of Lume 1.
 ## [3.0.11] - Unreleased
 ### Fixed
 - `tailwind` plugin: Support to import styles from npm. (i.e. `npm:npm:tw-animate-css`)
+- `tailwind` plugin: Imports with relative paths don't work.
 
 ## [3.0.10] - 2025-09-24
 ### Added

plugins/tailwindcss.ts

@@ -70,7 +70,6 @@ export function tailwindCSS(userOptions?: Options) {
           site,
           file,
         );
-
         const compiler = await compile(content, {
           from: filename,
           async loadModule(id, base, resourceHint) {
@@ -122,6 +121,11 @@ export function tailwindCSS(userOptions?: Options) {
               return { content, path: id, base };
             }
 
+            // If the path is relative, and no base is provided, use the CSS file location as base
+            if (!base && id.startsWith(".")) {
+              base = dirname(filename);
+            }
+
             const path = resolveInclude(id, options.includes || "", base);
             const content = await site.getContent(path, false);
 

tests/__snapshots__/tailwindcss.test.ts.snap

@@ -0,0 +1,3 @@
+body {
+  color: blue;
+}

tests/assets/tailwindcss/other.css

@@ -1 +1,3 @@
 @import "tailwindcss";
+@import "npm:[email protected]";
+@import "./other.css";