While starting a greenfield Elixir Phoenix app, we looked at some ways we could manage the UI, and landed on Tailwind CSS.
TailwindCSS: A Utility-First CSS Framework for Rapid UI Development
We're going to be adding Tailwind CSS to a new Phoenix 1.4 app, so let's get to it.
This guide assumes you have Phoenix installed and are ready to start a new project.
Create Phoenix Application
Let's create a new app:
$ mix phx.new tailwind
And install the frontend dependencies.
Next, prepare the application:
$ cd tailwind
$ mix ecto.create
$ mix phx.server
And ensure that your app is running on localhost:4000
Add Tailwind CSS
cd into the assets directory:
$ cd assets
Let's add some dependencies and tailwindcss using yarn
$ yarn add --dev autoprefixer postcss postcss-loader postcss-import tailwindcss
$ npm i -D autoprefixer postcss postcss-loader postcss-import tailwindcss
While still in the assets directory, run the tailwindcss initializer helper:
$ ./node_modules/.bin/tailwind init tailwind.config.js
This will create a default config file for tailwind at: assets/tailwind.config.js
Create a new assets/postcss.config.js file with this content:
And add the postcss-loader to the webpack config. Open assets/webpack.config.js and update the module rules to include postcss:
Tailwind's library is injected using some custom imports. Open assets/css/app.css and update it to this:
NOTE: be sure to remove the @import "./phoenix.css"; line.
Test it out in the browser:
This should get everything initialized and configured to use Tailwind CSS in your application. If you view the updates in the browser, it still looks strange but you can see the Tailwind's defaults are now being used:
Extract Custom Components
There is a section in the docs about how you can extract custom components using @apply which is helpful if you want to use fewer classes for common components.
First open assets/css/app.css
Then in assets/css/components/navbar.css :
You can use @apply to apply many common classes.
View the Docs:
Read through the docs for different patterns:
This was just a quick guide on how to integrate Tailwind CSS into your greenfield Elixir Phoenix app, and should help with developing a powerful UI.
We're enjoying working with Tailwind CSS, and will likely post more detailed articles on how we tackle different elements. But that should do it for this post.
Thanks for reading!