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

Your Libraries & OS Mentoring Libraries
, , , ,
1

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!

Cheers,
Kevin

35 Likes
3

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

4

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).

5

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: Phoenix.Endpoint.Watcher.watch/2
    (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: &Phoenix.Endpoint.Watcher.watch/2
    Args: ["npx", ["tailwindcss", "--input=css/app.css", "--output=../priv/static/assets/app.css", "--watch", {:cd, "/home/gabriel/Desktop/insta_pro/assets"}]]