Detailed instructions for nodejs tailwindcss

[ngortheone]

I apologize upfront for stupid question. I come from systems & backend engineering world, the world of frontend is new and frightening to me. I am trying to get started with Phoenix on FreeBSD.

I am aware of #49 , however this option has big drawback: there are are no official tailwind cli packages for FreeBSD and current package is outdated, maintained by a single person and relies on a complicated series of dirty hacks to get it working. (All thanks to convoluted build process of the tailwindcss CLI)

As I gather from the readme it is possible to use tailwindcss with nodejs:

For third-party Tailwind plugin support (e.g. DaisyUI), the node package must be used. See the Tailwind Node.js installation instructions if you require third-party plugin support.

However official tailwind documentation gives very generic guidance how to install it. Following those steps verbatim does not produce working result.

Can you please provide more detailed and tailored to phoenix steps?

I do have node and tailwind installed. npx tailwindcss works. As I understand tailwind mix dependency should not be needed, or at least should be reconfigured. I want to re-use auto-generated tailwind.config.js.

This snippet from config/config.ex hints on what input/output paths should be but I would appreciate official step-by-step getting started instruction for a web monkey like me.

# Configure tailwind (the version is required)
config :tailwind,
  version: "3.2.7",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

P.S. It seems that this bit has to be adjusted to run npx tailwind instead...

  defp aliases do
    [
      setup: ["deps.get", "assets.setup", "assets.build"],
      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind default", "esbuild default"],
      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
    ]
  end

[ngortheone]

Partially answering my own question.

Some good hints were discovered here: https://github.com/phoenixframework/tailwind/blob/main/lib/tailwind.ex#L34
Later I discovered the same info here: https://hexdocs.pm/tailwind/Tailwind.html

Side note: It is a shame that github's readme and hexdocs have different content.

Nevertheless after installing tailwindcss module globally (npm install -g tailwindcss) and setting :path I was still getting an error:

Rebuilding...
Error: Cannot find module 'tailwindcss/plugin'
Require stack:
- /usr/home/ngor/tmp/guild/assets/tailwind.config.js
- /usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/build/plugin.js
- /usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/build/index.js
- /usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/index.js
- /usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1070:15)
    at Module._load (node:internal/modules/cjs/loader:923:27)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (/usr/home/ngor/tmp/guild/assets/tailwind.config.js:6:16)
    at Module._compile (node:internal/modules/cjs/loader:1255:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/home/ngor/tmp/guild/assets/tailwind.config.js',
    '/usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/build/plugin.js',
    '/usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/build/index.js',
    '/usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli/index.js',
    '/usr/home/ngor/.local/lib/node_modules/tailwindcss/lib/cli.js'
  ]
}

The missing piece of the solution was found here:
https://stackoverflow.com/questions/15636367/nodejs-require-a-global-module-package

Apparently node is not looking in global location on require, which may be obvious for node experts, but came as a surprise to me.

after setting export NODE_PATH=$(npm root -g) I finally was able to start phx.server

Question to phoenix experts: is it possible to incorporate this trick NODE_PATH=$(npm root -g) into the build somehow? (I.e. to avoid setting it manually, but have it as a part of mix.exs or something ...

cc @dch -> a working solution that does not require hackery and elf patching :P

[dch]

@ngortheone this is what I used, with npm-node20 package:

$ npm install --prefix assets -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms daisyui@latest && ln -s ../assets/node_modules/.bin/tailwind _build/tailwind-freebsd-x64

for aarch64 that would be probably arm64 at the end. Does that help?

[shepelevstas]

npm i --prefix assets -D tailwindcss @tailwindcss/cli daisyui

in config/config.exs:

...
config :tailwind,
  version_check: false,
  path: Path.expand("../assets/node_modules/.bin/tailwindcss", __DIR__),
  ...
...

in assets/css/app.css:
change ../vendor/daisyui to daisyui
../vendor/daisyui-theme to daisyui/theme

rm _build/tailwindcss-...

[josevalim]

Can you please send a PR adding such steps to the README?

[shepelevstas]

Hi! I created a PR with inserted short note on how to do that: #136