@tailwindcss/jit doesn't work

[exalted]

@tailwindcss/jit is very recently announced and this gem doesn't seem to work with it:

npm install @tailwindcss/jit first and then add @tailwindcss/jit to your postcss.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/jit'),
    require('autoprefixer'),
  ],
};

Here's the error:

Configuration file: /Users/foo/example/_config.yml
            Source: /Users/foo/example
       Destination: /Users/foo/example/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
PostCSS Server listening on port 8124...
PostCSS Error!

Error: ENOENT: no such file or directory, stat 'stdin'

[colejd]

I've also run into this error, which I've logged as an issue on the JIT here.

I think the ENOENT error is just an artifact of running the build command through a watcher. When I invoke the build command directly with the --trace flag enabled, I get this:

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/main.css':
                    783: unexpected token at ''

[jeroenboumans]

Following the JIT setup I've encountered an error building with Jekyll: Error: ENOENT: no such file or directory, stat 'stdin'. Did you manage to get JIT up and running with Jekyll eventually

1. Install npm dependency:

npm install @tailwindcss/jit

2. Configure the tailwind config file:

module.exports = {
    mode: 'jit',
    purge: [
        ...

3. Add it to the postcss.config.js:

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss')("./tailwind.config.js"),
        require('autoprefixer'),
        ...(process.env.JEKYLL_ENV == "production"
            ? [require('cssnano')({ preset: 'default' })]
            : [])
    ]
};

4. CSS file:

---
---
@import "tailwindcss/base";
@import "tailwindcss/components";
...

5. Run build command:

NODE_ENV=production JEKYLL_ENV=production bundle exec jekyll build --trace 

Log:

 Incremental build: disabled. Enable with --incremental
      Generating...
         AutoPages: Disabled/Not configured in site.config.
        Pagination: Complete, processed 1 pagination page(s)
       Jekyll Feed: Generating feed for posts

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
PostCSS Error!

Error: ENOENT: no such file or directory, stat 'stdin'
  Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'style.css':
                    809: unexpected token at ''
bundler: failed to load command: jekyll (/usr/local/lib/ruby/gems/3.0.0/bin/jekyll)
/usr/local/Cellar/ruby/3.0.1/lib/ruby/3.0.0/json/common.rb:216:in `parse': 809: unexpected token at '' (JSON::ParserError)
	from /usr/local/Cellar/ruby/3.0.1/lib/ruby/3.0.0/json/common.rb:216:in `parse'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:43:in `decode'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-postcss-0.4.0/lib/jekyll-postcss/socket.rb:32:in `read'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-postcss-0.4.0/lib/jekyll/converters/postcss.rb:41:in `convert'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:106:in `block in convert'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `each'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `reduce'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:104:in `convert'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:84:in `render_document'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/renderer.rb:63:in `run'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:547:in `render_regenerated'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:539:in `block in render_pages'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `each'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:538:in `render_pages'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:211:in `render'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/site.rb:80:in `process'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:28:in `process_site'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:65:in `build'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:36:in `process'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `each'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/lib/jekyll/commands/build.rb:18:in `block (2 levels) in init_with_program'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
	from /usr/local/lib/ruby/gems/3.0.0/gems/jekyll-4.2.0/exe/jekyll:15:in `<top (required)>'
	from /usr/local/lib/ruby/gems/3.0.0/bin/jekyll:23:in `load'
	from /usr/local/lib/ruby/gems/3.0.0/bin/jekyll:23:in `<top (required)>'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli/exec.rb:63:in `load'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli/exec.rb:63:in `kernel_load'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli/exec.rb:28:in `run'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli.rb:494:in `exec'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/vendor/thor/lib/thor/command.rb:27:in `run'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/vendor/thor/lib/thor/invocation.rb:127:in `invoke_command'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/vendor/thor/lib/thor.rb:392:in `dispatch'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli.rb:30:in `dispatch'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/vendor/thor/lib/thor/base.rb:485:in `start'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/cli.rb:24:in `start'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/exe/bundle:49:in `block in <top (required)>'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/lib/bundler/friendly_errors.rb:130:in `with_friendly_errors'
	from /Users/jeroenboumans/.gem/ruby/3.0.0/gems/bundler-2.2.15/exe/bundle:37:in `<top (required)>'
	from /usr/local/opt/ruby/bin/bundle:23:in `load'
	from /usr/local/opt/ruby/bin/bundle:23:in `<main>'

[MisterJimson]

Also running into this

[stefcoetzee]

Exactly the same problem on my side, not sure how to resolve. Any ideas @mhanberg?

[ENT8R]

I think the issue is that this plugin passes a string with "stdin" to the PostCSS configuration. While this might be true for this plugin, Tailwind assumes that this parameter is an existing file to check for modifications to run the JIT engine, which leads to this error.

This error is likely triggered by Tailwind making use of fs.statSync(decodeURIComponent(pathname)).mtimeMs where specifically fs.statSync(decodeURIComponent("stdin")).mtimeMs leads to the error messages above if there is no file called "stdin" in the current working directory.

I guess the correct solution would be to set the from parameter to undefined, unless there is some method to pass the actual path of the CSS source file to PostCSS for further processing:

class PostCSS {
  static process(data, write) {
    postcss(config.plugins)
-     .process(JSON.parse(data).raw_content, { from: "stdin" })
+     .process(JSON.parse(data).raw_content, { from: undefined })
      .then((result) => write(result))
      .catch((error) => {
        console.error("PostCSS Error!\n");
        console.error(error.toString());
      });
  }

[jessetrippe]

Just ran into this.

[jessetrippe]

For those looking for a workaround, I created a starter project that doesn't use this plugin until a fix is discovered.

https://github.com/jessetrippe/jekyll-tailwindcss-starter-kit

[mhanberg]

I think #32 should have fixed this. I can re-open if that's not the case.