Phx_gen_tailwind - easily add Tailwind to a new Phoenix 1.6+ project

Hey all,

I created a phx.gen.tailwind Mix task that adds Node + TailwindCSS to a new Phoenix project. Essentially, it does the following steps for you:

  • Copy over a package.json file into your assets/ directory with tailwindcss as a dev dependency
  • Copy over a sane default tailwind.config.js to your assets/ directory
  • Modifies your assets/js/app.js file to no longer import CSS, since we are not using ESBuild for CSS processing
  • Modifies your assets/css/app.css file to import TailwindCSS and no longer import phoenix.css
  • Updates the aliases in your mix.exs file
  • Prompts to install your new NPM dependencies (tailwindcss)

Pretty much based on the PR by José.

Check out the code!



hey thank you for your work :slight_smile:
is it possible to add more mix commands to your library for different CSS frameworks
let’s say,
project A i wanted to add TailwindCSS
project B i wanted to add BulmaCSS,
project C i wanted to add BootstrapCSS … etc

Works great, thanks.

edit: oops, seems like Phoenix has an official integration for this: GitHub - phoenixframework/tailwind: An installer for tailwind Although yours is more automated… confused now.

edit2: took me a while to get that one working (PR’s going to make it more clear though). But this repo is still automated. I’ll still stick with the official one, simple because… official(ish).

Nicee, interesting

I’m having this erro on the terminal

[error] Task #PID<0.652.0> started from InstaProWeb.Endpoint terminating
** (stop) :watcher_command_error
    (phoenix 1.6.5) lib/phoenix/endpoint/watcher.ex:55:
    (elixir 1.13.0) lib/task/supervised.ex:89: Task.Supervised.invoke_mfa/2
    (stdlib 3.16.1) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Function: &
    Args: ["npx", ["tailwindcss", "--input=css/app.css", "--output=../priv/static/assets/app.css", "--watch", {:cd, "/home/gabriel/Desktop/insta_pro/assets"}]]