Esbuild infinite loop on Phoenix 1.6 / Tailwind 2

Questions / Help
, ,
1

Hello all!

I’ve successfully migrated from webpack to esbuild on a Phoenix 1.6 + Tailwind 2 app, following this PR and it’s working great.

But, there’s something weird happening, when I change a CSS file, esbuild kicks in to build the assets, but then it enters an infinite loop and it keeps building again and again.

My theory is that when the output is saved to priv/static/assets, it triggers a new build. I’ve proved this by modifying app.css file there, and yes it enters into infinite building again. It also happens when modifying non-CSS files like a .html.heex file.

Here’s a video showing this issue:

And here are the relevant parts of my code configuration:

There has to be something wrong on my side, but I’m unable to find it. Any ideas?

2 Likes
2

maybe the app.css is still included in the app.js ? In case you use the tailwind kit combination, you have to remove app.css from app.js

3

Thanks but no, I removed it from app.js

4

it seems to be tailwindcss is looping, which concrete version are you running as I think versions before 2.2.6 or 2.2.7 are having the stale process issue, you may also check if there are running tailwind processes (except from the tailwind plugin in vscode), even when you are not running the application

5

I’m on tailwindcss 2.2.16, the latest one

6

It looks related to Tailwind purge. This makes it fail:

module.exports = {
    mode: 'jit',
    purge: [
        "../**/*.md",
        "../**/*.html.md",
        './js/**/*.js',
        '../lib/*_web/**/*.*ex'
    ],
    theme: {},
    variants: {},
    plugins: []
}

If I remove the lines for md, it works fine:

module.exports = {
    mode: 'jit',
    purge: [
        './js/**/*.js',
        '../lib/*_web/**/*.*ex'
    ],
    theme: {},
    variants: {},
    plugins: []
}
7

strange :thinking: , then at least my suggestion that tailwind is looping was correct :wink:

1 Like
8

OK, I finally fixed it, it looks like the line about md was not correct. The following works fine:

module.exports = {
    mode: 'jit',
    purge: [
        './js/**/*.js',
        '../priv/**/*.md',
        '../lib/*_web/**/*.*ex'
    ],
    theme: {},
    variants: {},
    plugins: [
        require('@tailwindcss/aspect-ratio')
    ]
}

I have my NimblePublisher blog posts in markdown in the priv/contents/ directory.

Thanks!