Hi,
so, I’m using tailwind
dependency to add TailwindCSS and it works just fine, but I have a problem with adding Inter font as I simply can’t make it work.
mix.exs
defp deps do
[{:tailwind, "~> 0.1", runtime: Mix.env() == :dev}]
end
config.exs
# Configure esbuild (the version is required)
config :esbuild,
version: "0.14.0",
default: [
args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
# Configure TailwindCSS
config :tailwind, version: "3.2.4", 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: [
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
fonts.css
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: normal;
src: url("/fonts/inter-var.woff2") format("woff2-variations");
}
app.css
/* Import CSS Files */
@import "fonts.css";
/* Import TailwindCSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web/**/*.*ex',
'../lib/*_web/templates/*.heex'
],
theme: {
extend: {
fontFamily: {
primary: ["'Inter'", ...defaultTheme.fontFamily.serif]
}
}
},
variants: {},
plugins: []
};
and my fonts
folder which contains inter-var.woff2
is inside assets folder /assets/fonts/inter-var.woff2
. What am I doing wrong here? How to set it up properly?