I followed this guide to setup Tailwind on a new phoenix application. Install Tailwind CSS with Phoenix - Tailwind CSS
In dev, any changes to my index.html.heex file automatically builds a new app.css, just like I would expect. However, any classes specified in the heex file are not being processed by tailwind, hence the styles do not work. How do I go about troubleshooting this? It is as if it can’t find, or is not looking for the classes in the heex file, yet the tailwind.config.js is setup to process the heex templates.
tailwind.config.js
let plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web.ex',
'../lib/*_web/**/*.*ex'
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
]
}
index.html.heex
<h1 class="text-3xl font-bold underline bg-orange-200">
Hello world!
</h1>
config.exs
config :tailwind,
version: "3.2.1",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
cd: Path.expand("../assets", __DIR__)
]
dev.exs
...
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
...
