ThinkingElixir Discussion: Mental models for your Elixir and LiveView code

Chat / Discussions
, , ,
11

Slightly off topic, but since this episode mentioned tailwind’s JIT, in my short experience, you need to patch the default webpack.config.js with this (at the very bottom):

.concat(devMode ? [
  new HardSourceWebpackPlugin(),
  new HardSourceWebpackPlugin.ExcludeModulePlugin([
    {
        // HardSource works with mini-css-extract-plugin but due to how
        // mini-css emits assets, assets are not emitted on repeated builds with
        // mini-css and hard-source together. Ignoring the mini-css loader
        // modules, but not the other css loader modules, excludes the modules
        // that mini-css needs rebuilt to output assets every time.
        test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
    },
])
] : [])

and follow the tailwindcssjit install instructions as normal.

Not sure if it’s worth phx PR or not, might have unforeseen consequences.

PS: JIT is totally worth it. No more long waits if you change css files.

I think the patch above is all you actually need but a really scrappy working repo is here GitHub - rktjmp/phx-tailwindcssjit to compare configs with if someone has trouble.

2 Likes