WARNING:
This project is abandoned.
José Valim mentioned a build.js in this post. I will use esbuild in the future.
Provides an alternative
assets/
of Phoenix for using LiveView and TailwindCSS.
- Phoenix:
- assets building powered by Vite
- LiveView:
- theme-sensitive progress bar
- TailwindCSS:
- preinstalled plugins:
@tailwindcss/typography
@tailwindcss/forms
@tailwindcss/aspect-ratio
@tailwindcss/line-clamp
- set Inter var as default font
- preinstalled plugins:
- Heroicons
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
Umbrella projects are not supported for now.
It works by generating code into the your application instead of acting as a library. The users have complete freedom to modify the code so it works best with their app.
This idea comes from
mix phx.gen.auth
.
$ rm -rf assets # be careful
# with GNU tar
$ curl -L https://api.github.com/repos/c4710n/phoenix_custom_assets/tarball \
| tar -xvz --strip-components=1 --wildcards */assets
# with BSD tar
$ curl -L https://api.github.com/repos/c4710n/phoenix_custom_assets/tarball \
| tar -xvz --strip-components=1 --include="*/assets"
Remove :esbuild
and :tailwind
in mix.exs
:
- {:esbuild, "~> 0.5", runtime: Mix.env() == :dev},
- {:tailwind, "~> 0.1.8", runtime: Mix.env() == :dev},
Modify aliases
in mix.exs
:
defp aliases do
[
# ...
- "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"]
+ "assets.setup": ["cmd npm install --prefix assets"],
+ "assets.build": ["cmd npm run build --prefix assets"],
+ "assets.deploy": ["cmd npm run build --prefix assets", "phx.digest"]
]
end
Remove related config in config/config.exs
:
-# Configure esbuild (the version is required)
-config :esbuild,
- version: "0.14.41",
- default: [
- args:
- ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
- cd: Path.expand("../assets", __DIR__),
- env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
- ]
-
-# Configure tailwind (the version is required)
-config :tailwind,
- version: "3.2.4",
- default: [
- args: ~w(
- --config=tailwind.config.js
- --input=css/app.css
- --output=../priv/static/assets/app.css
- ),
- cd: Path.expand("../assets", __DIR__)
- ]
-
Adjust config of watchers in config/dev.exs
config :hello, HelloWeb.Endpoint,
# ...
watchers: [
npm: [
"run",
"watch",
cd: Path.expand("../assets", __DIR__)
]
]
# Ignore assets that are produced by build tools.
-/priv/static/assets/
-
-# Ignore digested assets cache.
-/priv/static/cache_manifest.json
+/priv/static/
Just remove it.
Clean mix.lock
:
$ mix deps.clean --unused --unlock
MIT