Roots Discourse

Tailwind 2.1.2 with jit in sage 10 on windows 10

Hi, i have a problem with slow compile files (small project ~ 20sec) in watch mode after i added custom css to my .scss files.
I want to update tailwind and use yit mode, but it doesnt work for me.
What i do:

  1. Update Tailwind version
    npm install tailwindcss@latest
  2. Activate yit mode
    mode: 'jit' in first line module.exports
  3. Install cross-env - probably is required to change node env in windows
    npm install --save-dev cross-env
  4. update scripts to:
    "build": "cross-env TAILWIND_MODE=build NODE_ENV=production mix",
    "build:production": "cross-env TAILWIND_MODE=build NODE_ENV=production mix --production",
    "start": "cross-env TAILWIND_MODE=watch NODE_ENV=development mix watch",

After this changes watch mode doesnt work.

Terminal say Compiled Successfully in 165ms, but browsersync doesnt work. After manually refresh page i also dont see changes in css. After next run yarn start the changes are visible, but after every change css i dont see changes.

I tested yarn build and it works fine.

Anybody help?

OK, i tested jit on base theme sage 10. JIT work fine on watch mode, but problem is when i added some fonts or images. It takes less than a second to compile, but there are no changes to the page or a long delay. Is it possible to configure watch in such a way that it omits images and fonts?

Did you do a yarn production:build after adding (local) images or fonts? If not, you should do it and afterwards yarn start

If this does not help. How to you reference the newly added image?

I have only images and fonts in project directories, but i dont use they.
After build:production i have the same problem.
I have 20 images and now yarn watch is faster when i remove mode: jit from tailwind config.

Regarding my question: “If this does not help. How to you reference the newly added image?”
By @asset(‘image’) or hardcode the path?
Do you reference the resources folder? Or the public folder?

Did you update the webpack.mix.js?
Like so and added tailwindcss?

mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('tailwindcss')],
  });

I have created a repository [https://github.com/grzesiek1owline/jit-test]
I dont use images in my code, for test i only add they to resources/images directory, thats all.

This repository is an example. Without images, everything work on yarn watch in a few ms. AFTER adding images to the directory, executing `` yarn build: production yarn watch``` definitely slowed down.

I have probably found a solution. Many tests meant that I didn’t know if the photos were a problem and I started looking in a different direction. It seems to me that the problem was browserSync, which may not work fast enough on the * .local domain. I changed my domain to * .dev and the work has been really fast for the last few hours. I hope it stays that way.

I was going to post in the original JIT discussion but these topics close so quickly that I can’t so I am posting here.

I thought I had all of the Sage 10 / Tailwind 2.0 / JIT stuff sorted out on MAC. I just finished a project using that setup and it worked great! BrowserSync worked great as well.

I’ve setup a new project to work on with that exact setup and now BrowserSync is not working.
The dev url, trellis.project.build will work just fine but when I run yarn start, the localhost url opens in a new tab and it just spins and spins.

I’m trying to narrow down what the issue could be.

This is my webpack.mix.js file. I’m using port 8888 and I’ve tried several others.

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({
    proxy: 'http://trellis.project.build', 
    port: '8888'
})


mix
  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [require('tailwindcss')],
    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();

Development wordpress_sites.yml:

wordpress_sites:
  project.com:
    site_hosts:
      - canonical: trellis.project.build
    local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
    admin_email: admin@example.test
    multisite:
      enabled: true
      subdomains: false
    ssl:
      enabled: true
      provider: self-signed
    cache:
      enabled: false

Is there a file I may be forgetting about that needs to be updated with the correct dev url or something?