GavinJoyce/ember-headlessui

Docs for using Tailwind

Opened this issue · 4 comments

NullVoxPopuli commented

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

(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 commented

@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 commented

🤔
Using (a newer approach that is maaaaaybe a week old) npx ember-apply tailwind gets me fingerprints:
image
not sure what's different with the broccoli-funnel tho

donaldsonjulia commented

@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.

  • 👍1
NullVoxPopuli commented

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

  • 👍1
  • 🎉1