roflbobl
Hello,
I have a problem in my project i can’t seem to solve. Tailwind will not produce the classes i write. So when i change a class to something i have not used before, no class will be generated and shipped to the frontend.
The hot-reloading is working, as the application updates when i change something and save.
Here is my config.exs
config :esbuild,
version: "0.17.11",
default: [
args:
~w(js/app.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
config :tailwind,
version: "3.2.7",
default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css),
cd: Path.expand("../assets", __DIR__)
],
email: [
args: ~w(
--config=tailwind_email.config.js
--input=css/app.css
--output=../priv/static/assets/email_app.css),
cd: Path.expand("../assets", __DIR__)
]
tailwind.config.js:
let plugin = require('tailwindcss/plugin');
module.exports = {
content: ['./js/**/*.js', '../lib/*_web.ex', '../lib/*_web/**/*.*ex'],
...
}
dev.exs:
config :oceanconnect, OceanconnectWeb.Endpoint,
http: [ip: {0, 0, 0, 0}, port: System.get_env("PORT") || 4000],
debug_errors: true,
code_reloader: true,
check_origin: false,
secret_key_base: "iri+y1gpDKiCiXXuj6LYuJh3Fpb0x0rlZvikPZ0iSJFmA2Lrx8W4G0f55nVt1RDR",
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)]},
tailwind: {Tailwind, :install_and_run, [:email, ~w(--watch)]},
sass: {
DartSass,
:install_and_run,
[:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
}
]
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixir-ls
- #ai
- #elixirconf-us
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
scoop
What happens if you switch to
version: 3.2.4and then runmix tailwind.install?roflbobl
Nope, still doesn’t work.
I run
mix asset.deployit properly builds the classes.alexpls
Something that stands out is that you’ve got a bunch of watchers defined in your
dev.exs, all which produce CSS. I wonder if there are some conflicts between them?What happens if you remove the last two and just leave in the first one? If that works - it’s at least narrowed down the issue to a config problem.
roflbobl
Not that either.
LostKobrakai
Which class are you trying to have generated and how/where do you define it?
GazeIntoTheAbyss
When you say it “won’t produce” them are we talking not existing when you use inspect? Or you aren’t able to see the characteristics you were expecting to produce?
If you use core-components remember that they have built in classes that might conflict with what you are trying to achieve.
I don’t use taliwind, but have found most of my CSS issues tend to come down to the core-components, to the point where I’ve kind of just nuked my core-components and left skeletons.
roflbobl
Any any markup. If i write
<div class="pr-11" />the classpr-11is not produced and shipped with theapp.cssfile. The file is a*.html.heexfile.roflbobl
I mean that the classes aren’t shipped with the
app.cssfile.I do use core-components, but this is outside of that. I does not work any place.
sodapopcan
Can share more of your
tailwind.config.js? It’s a shot in the dark here but do you have any custom classes defined? In the past when I’ve not been able to figure out why classes aren’t getting picked up it’s because I forgot theextendnamespace when adding tothemewhich blows away all the default stuff.roflbobl
So the solution was to delete my assets folder. I think the hash wasn’t properly updated after updating tailwind to a newer version