Just wanted to add a thank you for the guide—was very helpful.
sodapopcan
reisub
Just to offer an alternative solution how to add a font file, you can also include the font using the postcss-url plugin as follows. (cc @cvkmohan )
1. Place the font in assets/fonts
I only need the one variable font file in WOFF2 format so for me it’s at assets/fonts/Inter.var.woff2.
2. Add postcss-url dependency
npm install postcss-url --save-dev
3. Add the plugin to assets/postcss.config.js
Mine looks like this after adding it:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': { url: 'inline' },
tailwindcss: {},
autoprefixer: {},
}
}
4. Add the @font-face definition to your app.css
@font-face {
font-family: 'Inter';
font-weight: 1 999;
src:
url('../fonts/Inter.var.woff2') format('woff2-variations');
}
–
The above configuration will inline the font into your CSS like this:
@font-face { font-family: "Inter"; src: url("data:font/woff2;base64,d09G[...]d6eMC") format("woff2-variations"); font-weight: 1 999; }
If you prefer to keep the font(s) in separate files, use copy instead of inline.
6
ambareesha7
i have successfully made new phoenix 1.6.0 app with esbuild+tailwind+alpinejs everything fine even tailwind but tailwind-extension in vscode is not working the auto suggestion’s for tailwind are not showing up, i think it’s not working because of heex file extension.
2
thiagomajesk
Have you tried changing the extensions in your config? There’s a tailwindCSS.includeLanguages setting. If that doesn’t help you should probably open an issue on Tailwind’s extension repository.
1
ambareesha7
Thank you
I tried that setting but no luck it’s still not working,
I’ll create a GitHub issue in their repository
1
justinTX
If anyone has trouble getting this to work on Windows this did the trick for me.
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
node: [
"node_modules/tailwindcss/lib/cli.js",
"--input=css/app.css",
"--output=../priv/static/assets/app.css",
"--postcss",
"--watch",
cd: Path.expand("../assets", __DIR__)
]
]
2
cmo
You can also do cmd: ["/c", "npx", ... ] to run npx and other things that are .cmd files, which Erlang doesn’t seem to be able to open a port to.
2
justinTX
BRND
Are there any tricks/methods for the additional css files you could use as an addition to tailwindcss. Like for example adding @import "./custom-base-styles.css"; to the assets/css/app.css file. Would this still work and where do I need to drop these additional files. When trying via the assets/css/ location doesn’t work.
0
maz
Has anyone successfully made a Dockerfile integrating his deploy script? I tried generating a mix release.init but for some reason the start command does not seem to get called.
gist:
0