Phoenix 1.5 with Tailwind

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

{

open app.scss and delete all content. and add

@import "tailwindcss/base";

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

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: [

then add following in any template file to test

<div>
<div class="h-48 w-48">
<div class="aspect-w-5 aspect-h-4">

Happy tailwinding.

Depths of ocean could not swallow me.