Docs for using Tailwind

[NullVoxPopuli]

Since there is a high liklihood people are using headlessui with tailwind, maybe we should have docs on how to set up tailwind?

ember-cli-postcss isn't a great solution right now (esp for embroider), and overall, the ember-cli style pipeline is full of dragons / unintuitiveness.

So, We'll need to verify all the ember-integrated options, such as:
https://github.com/NullVoxPopuli/limber/blob/main/frontend/ember-cli-build.js#L32-L37

But, by far the easiest thing to do, which I kinda beat myself up about for not trying sooner, is to just build tailwind totally separate from ember (JIT, tailwind 3, etc):
https://github.com/NullVoxPopuli/limber/pull/375/files#diff-1b9c4fc3d51e8aff3ccf57346453ff963f824fb8e61a2c6fb32dc969377b6019

• I made a "styles" package that is private to my monorepo
• I can run tailwind's watch mode independent of my app
• This works best for monorepos that contain only one app (if you have a multi-app mega-repo, this may be trickier to get ergonomic, and I'm exploring options with turborepo for that (work-related))
• the JIT config seems to work anywhere:
  https://github.com/NullVoxPopuli/limber/pull/375/files#diff-123ea806aeb96205771c12465acef814d1cde5ca9f2047ed5cae5ecf0b7a6112R9
• I have a broccoli funnel for copying the files from the styles package's dist directory to the app's public directory:
  https://github.com/NullVoxPopuli/limber/blob/upgrade-stuff-2/packages/styles/broccoli-funnel.js
• I added an entry to my app/index.html to link the tailwind output here:
  https://github.com/NullVoxPopuli/limber/blob/upgrade-stuff-2/frontend/app/index.html#L14

(It kinda looks like a lot, because I mentioned all the steps, but these steps are far less than what's needed to get ember-cli-postcss working with embroider (It doesn't really) -- the thing to do with embroider right now is to use a postcss loader with webpack... but, webpack configs have their own set of problems)

[donaldsonjulia]

@NullVoxPopuli -- I would be interested in helping write up documentation for setting up Tailwind if there is an agreed upon method to document.

I had success with following your ideas for moving the Tailwind build into a separate folder and using broccoli funnel (removing ember-cli-postcss in the process -- with latest Tailwind's auto-purge it wasn't providing the watch-and-rebuild of styles we needed while actively developing). However, I ran into an issue with the funneled Tailwind stylesheet not being fingerprinted automatically like app/vendor css. I'm curious if you have any ideas on how to resolve that? Or is that because I couldn't use Embroider and had to rely on broccoliMergeTrees?

  const tailwindFunnelOutput= require('tailwind-styles/broccoli-funnel')();

  return new MergeTrees([app.toTree(), tailwindFunnelOutput]);

[NullVoxPopuli]

🤔
Using (a newer approach that is maaaaaybe a week old) npx ember-apply tailwind gets me fingerprints:

not sure what's different with the broccoli-funnel tho

[donaldsonjulia]

@NullVoxPopuli Do you have example of this new setup? I am also happy to start an example repo as a talking point -- could be useful for determining how to document a suggested setup for others. I think this will become much more relevant now that Tailwind auto-purges styles in 3.x -- it made it basically impossible for us to develop because adding a classname that wasn't previously in the project would require a full command line restart to be included in the compiled file when we used ember-cli-postcss.

[NullVoxPopuli]

Not in a separate repo, but the transforms are documented as code here: https://github.com/NullVoxPopuli/ember-apply/blob/main/packages/ember/tailwind/index.js