search

phoenixframework / phoenix

Peace of mind from prototype to production
https://www.phoenixframework.org
MIT License
21.27k stars 2.86k forks source link

Interaction of Tailwind and esbuild confusing in a new project created with phx.new #5912

Open ponychicken opened 1 month ago

ponychicken commented 1 month ago

I am not sure if this is a bug or needs to be documented better: In a new project, there will be tailwind, taking care of generating the app.css and esbuild will generate the app.js

But if you add a new node dependency (in my case leaflet map) and its docs suggest to add some import calls to your js file in order to import necessary js and css, the setup breaks.

Once there is a call to import some css in app.js, esbuild will start generating an app.css as well. Which app.css will prevail is then just a question which one of the watchers got executed last. Anyway both the app.css generated from esbuild and the one generated from tailwind will be non funtional. the esbuild one will lack all tailwind classes, while the tailwind one will not have the styles that your library needs.

SteffenDE commented 1 month ago

I wouldn't say that this is a bug, but it's definitely not nice behavior. The generators are meant to provide a sane default for getting started - anything relying on custom packages via node_modules is out of scope for them.

That being said, we could probably rename the app.css file into main.css to prevent conflicts if esbuild emits CSS as well. Then, we could add a section to the generated comment in app.js mentioning like:

// If you have dependencies that try to import CSS, esbuild will generate a separate `app.css` file.
// To load it, simply add a second `<link>` to your `root.html.heex` file.

Wdyt?

ponychicken commented 1 month ago

I think that sounds like an elegant solution which doesnt require any in depth changes.

quantuminformation commented 3 weeks ago

new comer here making a youtube vid about all this, spent the last hour trying to remove tailwind with no luck, why this is a default? we don't even need it with css3

Gazler commented 3 weeks ago

There is a --no-tailwind generator that can be used when creating the application. https://hexdocs.pm/phoenix/Mix.Tasks.Phx.New.html#module-options

quantuminformation commented 3 weeks ago

oh thats good to know thx

josevalim commented 3 weeks ago

I like the main.css route too.