🐥 Using Tailwind 4.0.0-beta.1 with Elixir Phoenix

You just need to update your config.exs file from:

config :tailwind,
  version: "3.4.3",
  my_app: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
      --minify
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

to:

config :tailwind,
  version: "4.0.0-beta.1",
  my_app: [
    args: ~w(
      --config=assets/tailwind.config.js
      --input=assets/css/app.css
      --output=./priv/static/assets/app.css
      --minify
    ),
    cd: Path.expand("../", __DIR__)
  ]

To summarize:

• Update the version
• Change the config path in --config
• Change the input path in --input
• Change the output path in --output=
• Don't cd into the assets folder

You will also need to update the assets/tailwind.config.js file:

module.exports = {
  content: [
    "./js/**/*.js",
    "../lib/rss_reader_web.ex",
    "../lib/rss_reader_web/**/*.*ex"
  ]
}

to:

module.exports = {
  content: [
    "./assets/js/**/*.js",
    "./lib/rss_reader_web.ex",
    "./lib/rss_reader_web/**/*.*ex"
  ]
}

Once updated, you can use mix tailwind.install to install the updated binary:

$ mix tailwind.install

18:39:18.005 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v4.0.0-beta.1/tailwindcss-macos-arm64

To test that the builds are working, execute mix assets.build:

$ mix assets.build

Rebuilding...

Done in 216ms.

  ../priv/static/assets/app.js  236.2kb

⚡ Done in 37ms

source