Elixir Phoenix: Creating An App With Tests (Part 2: Using Tailwind CSS)

Updated: January 16th, 2019

CSS framework (GitHub)

By default, Phoenix includes Milligram as its CSS framework of choice. Before Phoenix 1.4, Bootstrap was the default. Why the switch? Chris McCord explains the change:

First off, Milligram is tiny. The big goal is for all of our generated markup, whether phx.new or phx.gen.html, is to be classless, while still looking great out of the box. Milligram gives us that. We’re not prescribing you use Milligram for all your styles, rather we are allowing folks to hit the ground running and not have to rewrite all their HTML later when they go to use Bootstrap, foundation, Bulma, et al, or their own custom CSS solutions.

We could stick with Milligram or switch to something more familiar like Bootstrap. However, I have recently been using and loving Tailwind CSS on projects and so that is what we will use here. Tailwind is a utility-first CSS framework with no opinion how your site should look.

NOTE: Version 1.0 of TailwindCSS has recently been released. This version of the tutorial uses 0.7.3 and will soon be updated to use 1.0.

We will start things off by deleting the phoenix.css file located in the assets/css directory. We will also remove @import “./phoenix.css” from assets/css/app.css (82aba78). Our homepage is now bland and boring. Let’s fix that by installing Tailwind CSS.

Before we run our npm install commands, we want to make sure we are in the assets directory. Use cd assets to change our directory to assets. If you happen to run any of the commands outside the assets directory, no worries! You can undo it by running the same command using npm uninstall instead of npm install.

We can install the Tailwind package, as well as PostCSS, using
npm install postcss-loader tailwindcss@0.7.3 --save-dev. While we are still in the assets directory, we will run ./node_modules/.bin/tailwind init. This will generate tailwind.js which holds all the configuration for Tailwind’s classes.

In Phoenix 1.4, the use of brunch was replaced with webpack. We will need to add postcss-loader to assets/webpack.config.js. Find css-loader inside the CSS section of the rules module and add ‘postcss-loader’ (be sure to separate the two with a comma).

assets/webpack.config.js

In our assets/css directory, we have a file called app.css. We will add the below code to ensure Tailwind is loaded in our app.

assets/css/app.css

We will next need to create a postcss.config.js file inside the /assets directory and add the below code to it (e8de1aa).

assets/postcss.config.js

Tailwind is now set up and ready to use in our application! You will notice our homepage still looks bland. Let’s open up our page/index.html.eex page and add some CSS classes to see Tailwind in action. We will add text-5xl and text-red to give us some big, red text (9ed1623).

lib/catcasts_web/templates/page/index.html.eex

Let’s restart our server to make sure the new assets get loaded. If we now go to our homepage, we will see “Welcome to Phoenix!” in big, red letters!

Part 1: The Setup
Part 2: Using Tailwind CSS

Next Up:
Part 3: Navbar, Errors, and Homepage
Part 4: Using Google Ueberauth
Part 5: Setting a Current User
Part 6: Using the YouTube API
Part 7: Setting Up Authorizations
Part 8: Making Things Look Nicer
Part 9: Search, Sort, Pagination
Part 10 Bonus: Using Elixir’s 1.6 Code Formatter

Follow me on Twitter @thebrianemory. Follow me here, click the hands below to show some appreciation, leave a comment, and get in touch!