Tailwind recently released their JIT compiler, which much more flexibility
when encountering edge cases during your development. It allows you to use
class names like
w-[200px] and so on.
Let's see how you can integrate this into your Laravel setup.
Firstly run from your terminal to get the latest version of tailwind.
Enabling jit mode
As of version 2.1.0 the jit compiler is integated in Taliwind, without the need for an extra plugin. You can edit your
tailwind.config.js and change the mode to
jit and you are good to go.
It's important that you have the purge option correctly filled, so that Tailwind know which files to take into consideration.
In version 2.2.0 the context was switched from "watching" to "tracking".
From the Tailwind changelog:
JIT: Use "tracking" context by default instead of "watching" context for improved reliability with most bundlers (#4514)
Depending on which tooling you use, you may need to explicitly set TAILWIND_MODE=watch until your build runner has been updated to support PostCSS's dir-dependency message type.
So the last step would be to change the TAILWIND_MODE variable to "watch" when executing our hot or watch script.
Testing the configuration
Now if you run:
you should see the following output in your command line:
> hot > TAILWIND_MODE=watch mix watch --hot warn - You have enabled the JIT engine which is currently in preview. [tl! highlight:0] warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. info - Tailwind CSS is watching for changes... [tl! highlight:0] info - https://tailwindcss.com/docs/just-in-time-mode#watch-mode-and-one-off-builds