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!

Cheers,
Kevin

31 Likes