Error: Can't resolve 'tailwindcss' in '/path/../@import 'tailwindcss';

[virtuallyunknown]

Greetings. I am trying to compile tailwind using postcss and @tailwindcss/postcss. Here is the script that I am using:

// build.js
import tailwindPostcss from '@tailwindcss/postcss';
import { readFile, writeFile } from 'node:fs/promises';
import postcss from 'postcss';

const baseFile = await readFile('./src/tailwind.css', 'utf8');

const res = await postcss([
    tailwindPostcss({
        base: baseFile,
        optimize: false
    })
]).process(baseFile, { from: baseFile, to: './out/index.css' });

await writeFile('./out/index.css', res.css);

and here is my tailwind.css file:

/* src/tailwind.css */
@import 'tailwindcss';

@theme {
    --font-jetbrains: 'Jetbrains Mono', 'monospace';
}

body {
    background-image: url('http://localhost:3001/static/bg.jpg');
}

When I run the script I am getting a bunch of errors that I can't figure out:

/path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:564
                        const error = new Error("Can't " + message);
                                      ^

Error: Can't resolve 'tailwindcss' in '/path/to/tw-build/@import 'tailwindcss';

@theme {
    --font-jetbrains: 'Jetbrains Mono', 'monospace';
}

body {
    background-image: url('http:/localhost:3001/static'
    at finishWithoutResolve (/path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:564:18)
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:656:15
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/path/to/tw-build/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/path/to/tw-build/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:89:43
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:718:5
    at eval (eval at create (/path/to/tw-build/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /path/to/tw-build/node_modules/.pnpm/enhanced-resolve@5.18.0/node_modules/enhanced-resolve/lib/Resolver.js:718:5 {
  details: "resolve 'tailwindcss' in '/path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    'body {\n' +
    "    background-image: url('http:/localhost:3001/static'\n" +
    '  Parsed request is a module\n' +
    "  using description file: /path/to/tw-build/package.json (relative path: ./@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    'body {\n' +
    "    background-image: url('http:/localhost:3001/static)\n" +
    '    resolve as module\n' +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    'body {\n' +
    "    background-image: url('http:/localhost:3001/static/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    'body {\n' +
    "    background-image: url('http:/localhost:3001/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    'body {\n' +
    "    background-image: url('http:/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    '}\n' +
    '\n' +
    "body {/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'monospace';\n" +
    "/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono', 'mon/node_modules doesn't exist or is not a directory\n" +
    "      /path/to/tw-build/@import 'tailwindcss';\n" +
    '\n' +
    '@theme {\n' +
    "    --font-jetbrains: 'Jetbrains Mono'/node_modules doesn't exist or is not a directory\n" +
    "      /node_modules doesn't exist or is not a directory"
}

Node.js v23.6.1

Oddly enough, if I remove the background-image property from the tailwind.css file, then my script compiles successfully.

Anyone who can explain to me what is going on and how to fix it? There is no documentation available for the @tailwindcss/postcss plugin, and the error messages make very little sense to me.

Here is a reproducible repository:

https://github.com/virtuallyunknown/tw-build

[wongjn]

from and base should be file paths, not file content:

 const res = await postcss([
     tailwindPostcss({
-        base: baseFile,
+        base __dirname,
          optimize: false
     })
-]).process(baseFile, { from: baseFile, to: './out/index.css' });
+]).process(baseFile, { from: './src/tailwind.css', to: './out/index.css' });

[virtuallyunknown]

Hey, it's you again, thanks a lot helping out. This does indeed work, but is it even documented anywhere? I could not find anything or even code examples using the v4 @tailwindcss/postcss plugin programmatically.

As for the postcss process chained method, this is entirely my fault. I was even reading the docs but somehow overlooked the fact it expects a path there, my bad.

[wongjn]

but is it even documented anywhere?

The source code perhaps:

tailwindcss/packages/@tailwindcss-postcss/src/index.ts

Lines 45 to 46 in c09bb5e

	// The base directory to scan for class candidates.
	base?: string

[virtuallyunknown]

Well, this is unfortunate because I did check the type definitions that come up when you press F12, and it lead me to this file, but it did not contain the comments from the source file you linked just now.

// node_modules/@tailwindcss/postcss/dist/index.d.ts

import { PluginCreator } from 'postcss';

type PluginOptions = {
    base?: string;
    optimize?: boolean | {
        minify?: boolean;
    };
};
declare const _default: PluginCreator<PluginOptions>;

export = _default;

Ideally these comments should be part of the .d.ts file to provide hints in the editor, but for one reason or another it seems they got stripped out during compilation. A very wild guess of mine would be because the comments are using the single-line comment format (//) instead of JSDoc format /** ... */.

Perhaps this is something that can be improved.