Tailwind JIT does not work with Embroider (default embroider settings)

[NullVoxPopuli]

I have an app over here: https://github.com/nullvoxpopuli/limber

CLASSIC=true TAILWIND_MODE=watch ember s allows changes in templates' classes to rebuild the css file, adding classes as I use them in the template.
But TAILWIND_MODE=watch ember s (using embroider) results in no css changes doing the same or similar class adding.

After each change, I'd cat dist/assets/limber.css | grep text (I was flipping between one of many text-{color} classes that I'm not using)

I'm also using ember-cli-postcss, and I saw another issue related to that addon, but I'm not sure if related.

Here is my ember-cli-postcss config:

// in ember-cli-build.js
    postcssOptions: {
      compile: {
        plugins: [require('@tailwindcss/jit')('./tailwind.config.js'), require('autoprefixer')()],
        cacheInclude: [/.*\.(css|hbs)$/, /.tailwind\.config\.js$/],
      },
    },

My Tailwind config:

// tailwind.config.js (sibling file to ember-cli-build)
'use strict';

const colors = require('tailwindcss/colors');

module.exports = {
  purge: ['app/**/*.{js,ts,hbs}'],
  darkMode: false,
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',

      ...colors,

      ember: {
        brand: '#E04E39',
        black: '#212121',
        'burnt-ember': '#9b2918',
        gray: '#817f7f',
        blue: '#1e719b',
        'faint-gray': '#efebea',
        'light-blue': '#74b0ce',
        linen: '#fdf7f6',
        yellow: '#fbc840',
        white: '#fdfdfd',
      },
    },
    fontFamily: {
      sans: ['system-ui', 'Helvetica', 'Arial', 'sans-serif'],
    },
    extend: {
      minWidth: {
        '1/3': '33%',
      },
      gridTemplateRows: {
        editor: 'min-content 1fr',
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
};

[rwjblue]

You'll have to figure out how this is supposed to work, I'm not familiar with the details of tailwind or @tailwindcss/jit to know what it is supposed to do.

• What is @tailwindcss/jit trying to do?
• Where does it emit files?
• How are those files consumed?

[NullVoxPopuli]

This is probably where investigation should occur: jeffjewiss/ember-cli-postcss#732

My hunch is that it's likely an ember-cli-postcss <-> embroider compat issue that needs to be worked out with ember-cli-postcss

[NullVoxPopuli]

I have a way for this to work, and it's pretty simple overall.

tldr: build and configure tailwind separate from embroider, add link to index.html.

---

• remove ember-cli-postcss
• remove all css/postcss/etc related packages and config from the app
• remove tailwind from app's css
• create a separate package in the monorepo for just the styles.
  (example here: https://github.com/NullVoxPopuli/limber/pull/375/files/432dffe163ec4dfb0ca4c8295dd9cb84c349782c#diff-1b9c4fc3d51e8aff3ccf57346453ff963f824fb8e61a2c6fb32dc969377b6019)
• use these scripts:

  "scripts": {
    "build": "yarn tailwindcss -o dist/tailwind.css",
    "start": "yarn tailwindcss -o dist/tailwind.css --watch"
  },

• specify tailwind config like this:

  const path = require('path');
  const appRoot = path.join(__dirname, '../../frontend');
  
  module.exports = {
    mode: 'jit',
    purge: [`${appRoot}/app/**/*.{js,ts,hbs}`, `${appRoot}/public/**/*.md`],

• follow instructions for setting up tailwind on the tailwind site.

• create super basic broccoli plugin to, at build time copy the output assets:

  const path = require('path');
  const Funnel = require('broccoli-funnel');
  
  const SRC_FILES = path.join(__dirname, 'dist');
  
  /**
   * This broccoli funnel is for copying the built assets to a target
   * app's public folder. No building occurs
   *
   */
  module.exports = function stytlesFunnel() {
    return new Funnel(SRC_FILES, {
      destDir: 'assets/',
    });
  };

• add new broccoli funnel to extraPublicTrees:

  extraPublicTrees: [
       require('@nullvoxpopuli/limber-styles/broccoli-funnel')(),
  ],     

• add link to index.html

     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css">