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
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?
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.
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
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.
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 %>