Phoenix 1.5 with Tailwind

2 min readDec 6, 2020

We will also add tailwind forms and tailwind-aspect-ratio for working with images.

mix phx.new tailwind

cd assets

yarn add --dev autoprefixer postcss postcss-loader postcss-import tailwindcss

create a file postcss.config.js inside assets directory

// postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

open webpack.config.js and change sass-loader to postcss-loader

{  test: /\.[s]?css$/,    use: [      MiniCssExtractPlugin.loader,      'css-loader',      'sass-loader',      'postcss-loader'    ],}

open app.scss and delete all content. and add

@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";

inside assets directory, run (optional)

npx tailwind init --full // --full is optional too

this will generate a tailwind.config.js file which you can use to extend the tailwindcss if necessary (we will use it to add a form plugin)

Tailwindcss in integrated. to test just put a background color in app.html.eex

<body class=”bg-yellow-50">

This will give a background color from tailwind css.

If we want to add tailwind form plugin

yarn add @tailwindcss/forms

then in our tailwind.config.js file add this line

plugins: [
    require('@tailwindcss/forms'),
    // ...
  ]

for a test, let’s copy paste form code from this link

Tailwind UI

Beautiful UI components by the creators of Tailwind CSS.

tailwindui.com

our form should look exactly like the link.

Adding aspect-ratio plugin, in our asset folder

yarn add @tailwindcss/aspect-ratio

Then in our tailwind.config.js file let’s add

plugins: [    require(‘@tailwindcss/forms’),    require(‘@tailwindcss/aspect-ratio’)],

then add following in any template file to test

<div>
  <div class="h-48 w-48">   
     <div class="aspect-w-5 aspect-h-4">       <img class="object-cover"      src="https://images.unsplash.com/photo-1601758124360-      86f5a0432c42?      ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-    1.2.1&auto=format&fit=crop&w=1534&q=80"       alt="">
    </div>
  </div>
</div>

Happy tailwinding.

Phoenix 1.5 with Tailwind

Tailwind UI

Beautiful UI components by the creators of Tailwind CSS.

Written by Sis Ccr