Set up Tailwind in a Phoenix application

phoenix - setup_tailwind.md

Set up Tailwind CSS in a Phoenix application

• add tailwind dependency to the mix.exs file: {:tailwind, "~> 0.16", runtime: Mix.env() == :dev}
• Configure tailwind in config.exs, where it will read, and where it will output the data:

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

• Include the Deploy Script in mix.exs:

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

• Install Tailwind with mix tailwind.install
• Include the import modules in: ./assets/tailwind.config.js:

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Include Tailwind's Core components in app.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
...

• remove previously generated phoenix.css file.