Customise a new Phoenix app (Part 2 - Style)

TL;DR try CustomPhx - GitHub in a new Phoenix project to automate Tailwindcss installation and HTML generation.

In Part 1 of this series we updated both mix and NPM dependencies in a new Phoenix project. Let's continue our customisations with some style!

You generate a new Phoenix project. Do you continue building on top of the default styles? or choose your own adventure?

Phoenix Default

Since Phoenix 1.4, all new projects include the minimal CSS framework Milligram in assets/phoenix.css. This provides classless markup for any HTML generated with mix phx.gen.html.

Style with Milligram

You chose Milligram!

You have sensible defaults and can use the generators to get up and running quickly.

To theme your project write custom classes and add them to your markup. Check out Awesome Milligram for additional resources.

Style with something else

You chose to replace Milligram!

You have options. Lots of options. Start with this categorised list Awesome CSS Frameworks.

Installation instructions are specific to each framework but if it comes with a pre-processor (LESS, SCSS, SASS, PostCSS) you'll need to install a loader to package.json and configure it in webpack.config.js. See Webpack Loaders - Styling.

Unfortunately, the Phoenix HTML generated files will look unstyled and may require significant markup changes and additional classes to look good in a new framework. Alternatively you can Customise your Phoenix HTML Generator.

Style with Tailwindcss

I chose Tailwindcss!

This utility-first framework recently matured into a 1.0 release and has quite a buzz around it (fully justified IMO).

For a basic install see the excellent Using Tailwind with Phoenix guide.

For a more comprehensive approach i've created a mix archive to automate installation with a custom HTML generator CustomPhx - GitHub. Give it a try!

Generated form field markup

<%= label class: "block mb-6" do %>
  <span class="form-label block">name</span>
  <%= text_input f, :name, class: "form-input w-full mt-1" %>
<% end %>
<%= error_tag f, :name %>

Generated form