Origin of tailwindcss style file

[yaitskov]

Hi,

According to readme miso-ui is based of tailwindcss.
Tailwindcss is not a regular CSS library, because there is no a single CSS to download.
The library is shipped with a CLI tool that generates CSS file based on HTML and JS.
miso-ui style.css is under version control.
I wasn't able to find a comment or make/nix instruction updating that file.

I tried to feed app.wasm to tailwindcss without success:

tailwindcss -i public/app.wasm  -o wasm.css
≈ tailwindcss v4.1.11

Error: Missing opening {
~/study/haskell/miso/miso-ui$ ls *css
ls: cannot access '*css': No such file or directory

tailwindcss -i public/index.html  -o wasm.css
≈ tailwindcss v4.1.11

Error: Unterminated string: 's animated by default, but you can disable it if you prefer.</p></section></details></section></div><div role="tabpanel" id="demo-tabs-with-panels-panel-2-accordion" aria-labelledby="demo-tabs-with-panels-tab-2-accordion" tabindex="-1" aria-selected="false" hidden><div class="relative"><pre class="grid text-sm max-h-[650px] overflow-y-auto rounded-xl scrollbar"><code class="language-haskell !p-3.5 hljs" >-----------------------------------------------------------------------------'

Should I build the project on GHCJS backend?

[dmjio]

We should be building everything from scratch as the basecoat docs describe.

https://basecoatui.com/installation/

But instead we're just copying the prebuilt CSS from the docs directory that holds the basecoat css website static assets.

https://github.com/hunvreus/basecoat/blob/main/docs/src/assets/styles.css

We should probably add their CSS build process to our Makefile.

[mtamc]

If this helps anyone else wondering how to set up tailwind for Miso, I'm currently doing it on my own project like this:

• Install the standalone Tailwind CLI (do NOT install it with npm as the one in npm looks for Tailwind in node_modules, while the standalone release comes bundled with it) - next steps assume the standalone Tailwind CLI is in your PATH with name tailwindcss
• put @import "tailwindcss"; inside app/input.css
• run tailwindcss -i app/input.css -o static/output.css - this scans all files in ./app/ for Tailwind classes (this is a language-agnostic detection)
• Load output.css with e.g. (Miso.component 0 updateModel viewModel) { Miso.styles = [Href "/output.css" True] }
• A workaround seems to be necessary in order to access static assets in WASM browser mode (hot reload dev server): Document how to serve static assets in browser mode sampler#20
• You can re-generate the Tailwind CSS when ghciwatch detects a file change with the command line parameter --after-reload-shell (you probably also want --after-startup-shell), for example here is my ghciwatch command taken from miso-sampler and with tailwind stylesheet generation added:
  • ghciwatch --after-startup-ghci :main --after-reload-ghci :main --after-startup-shell 'tailwindcss -i app/input.css -o static/output.css' --after-reload-shell 'tailwindcss -i app/input.css -o static/output.css' --watch app/*.hs --debounce 50ms --command 'wasm32-wasi-cabal repl app -finteractive --repl-options="-fghci-browser -fghci-browser-port=8080"'
• Don't forget to add tailwindcss -i app/input.css -o static/output.css to your build script as well, in your Makefile or other

I also managed to get autocompletion, auto-sorting, and hover documentation in Neovim using coc.nvim using yaegassy/coc-tailwindcss3 (despite the name, it supports Tailwind 4) and the following coc settings:

  "tailwindCSS.includeLanguages": { "haskell": "html" },
  "tailwindCSS.experimental.classRegex": [ "class_\\s+\"([^\"]*)\"" ],
  "tailwindCSS.headwind.classRegex": { "haskell": "class_\\s+\"([\\._a-zA-Z0-9\\s\\-\\:\\/]+)\"" },
  "tailwindCSS.headwind.runOnSave": true

(Disclaimer: Claude came up with the regex settings.)

[dmjio]

This is great ! We should upstream all of this into miso-ui.

Some comments:

• tailwindcss should be available via the flake.nix.

➜  miso git:(master) ✗ nix develop --command bash -c 'tailwindcss'
≈ tailwindcss v4.1.11

• The /assets path should be available when using wasm browser mode (per comment).

An upstream would be nice :)