Has anyone managed to get Tailwindcss JIT working with Sage 10 yet?
I’ve tried several different methods to integrate this following the suggested steps but it continually broke the build process.
Just interested to hear if anyone has been successful?
Latest Sage 10 is with tailwind already as i understand https://github.com/roots/sage, tried with that?
Haven’t tried with latest build but will defo give that a try. Thanks 
Been using it for a while and its speed is nuts. To calrify, the latest comes with Tailwindcss not JIT.
To install @tailwindcss/jit you’d need to run
yarn add -D @tailwindcss/jit
then replace the following inside webpack.mix.js
- postCss: [require('tailwindcss')],
+ postCss: [require('@tailwindcss/jit')],
Here’s a working example https://github.com/theMosaad/sage-tailwindcss-jit
Hi, I tried upgrading to jit with your instructions but it doesn’t work. It breaks the site styles.
This does indeed work for latest Sage release, and as you say - the speed compiling is unreal. Unfortunately it didn’t work for a slightly earlier version of Sage 10 - just threw up a range of few PostCSS errors. Think its time to upgrade to latest version.
Thanks for sharing that install info 
You’d need to upgrade to postcss v8, and tailwindcss v2 for jit to work. You have those out of the box with latest Sage 10. You’d need to upgrade the build process for any older release.
I am using TWv2. I started with an empty Sage 10 and installed TWv2 via their docs.
Here’s what I have in my package.json
"laravel-mix": "^6.0.11",
"postcss": "^8.2.8",
"sass": "^1.32.7",
Here’s what I have in my webpack file:
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
mix
.setPublicPath('./public')
.browserSync('https://project.build');
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('@tailwindcss/jit')],
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
mix
.sourceMaps()
.version();
When I run yarn build my project breaks but my source code does contain styles/app.css?id=xxx
Can you define “breaks” with some details? What happens, specifically? i.e. does the build fail; does the build succeed but styles are missing; does the build succeed but but styles are wrong; etc.
My bad. The build succeeds and its super fast. The stylesheet is there but the styles aren’t being applied.
Have you setup the purge rules in the tailwind.config.js? Sharing it would be helpful as well.
I seem to have the same situation as Josh here.
yarn add -D @tailwindcss/jitpostCss: [require('@tailwindcss/jit')], in webpack.mix.js
require('@tailwindcss/jit'), to tailwind.config.js in the plugins
devDeps:
"@tailwindcss/jit": "^0.1.18",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"laravel-mix": "^6.0.11",
"sass": "^1.32.7",
"tailwindcss": "^2.0.3"
What I see is after running yarn start Browsersync sets up properly. If I change something in a .scss file the watch task nearly instantaniously compiles (340ms), but I do not get the typical [Browsersync] Reloading Browsers... and the Browsersync badge after refresh in the browser.
If I do a manual hard refresh those SCSS changes are not refelcted. If I change a blade template, refreshing works fine.
Did you add the purge rules as well?
EDIT: purge: {
content: [
'./app/**/*.php',
'./resources/**/*.php',
'./resources/**/*.vue',
'./resources/**/*.js',
],
},
That of course resolved my broken styles issue and everything is working great and super speedy!
But now when I run yarn build, it doesn’t take me back to the terminal after the build is complete. Instead it almost acts like the yarn watch command without watching anything.
The terminal on the left is yarn build and the right is yarn start. Previously running yarn build would exit back to the terminal after the build is complete. This isn’t extremely important but I often run yarn build if something appears to be getting cached and it was nice to have this terminal ready to run commands if needed. Now I have to exit each time I run build.
Purge is only used on yarn build and I am having issues with yarn start. Not sure if that question was for me. My current purge settinsg are the defaults in latest Sage 10 with the *.vue removed. content: ['./app/**/*.php', './resources/**/*.php', './resources/**/*.js'],
With @tailwindcss/jit, purge is used for yarn start as well. However, instead of generating all possible classes then purge, it used the purge paths to see which classes it needs to generate.
I see what you mean but I couldn’t reproduce your issue to debug it. Happy to help if you can share it via a DM.
Same issue with Tailwind 2.1. I also notices the yarn build task runs like a watch task that does not end.
yarn build sits here:
EDIT: 
Updated video @ https://vimeo.com/533323926/843134493a
Try changing the build script in package.json to:
TAILWIND_MODE=build mix
This fixed the yarn build issue for me.
That works for the build task, not working with TAILWIND_MODE=watch on the start task.
