Are you aware that TailwindCSS has documentation on this topic as well?
I wouldn’t use Sass with Tailwind, but if you absolutely must, try configuring Vite in your project, you’ll get esbuild, postcss, and sass, practically out of the box.
thiagomajesk
fceruti
Maybe it’s just the way it came across to me, but your tone seems to imply I should have RTFM instead of posting and I don’t appreciate it.
Was there any doubt, given the title, that I wanted a ready-to-go config boilerplate? I spent a couple of hours trying to solve this and I couldn’t, so, as I thought it was a pretty common use case and none of the dozens of articles I read solved this particular issue, a question was in place. I’m not trying to offshore my problem (actually I kinda desisted on using scss, but would be better thou), I’m just asking: Have you solved this? Can you share?
Cool, thanks. This kinda approaches an answer, but I don’t want to introduce more complexity.
1
drl123
If you are not dead-set on SCSS, then Mike Clark over at pragmaticstudio.com has an excellent write up on installing TW and Phoenix 1.6 with esbuild here: Adding Tailwind CSS to Phoenix 1.6.
To add Alpine, just install v2.8.2 with npm and esbuild will pick it up. BTW…not specifying a version did not work for me, but 2.8.2 did.
npm i --save alpinejs@2.8.2
[updated to use latest alpine@3.4.2]
npm i --save alpinejs
Then in your app.js:
add: import Alpine from "alpinejs"
new for alpine 3, add:
window.Alpine = Alpine
Alpine.start()
change the liveSocket line to:
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) { Alpine.clone(from.__x, to) }
}
}
})
I think that’s about it. Hope that helps.
3
thiagomajesk
I’m sorry if you feel that way, but since written language is very difficult to convey tone and you will probably be dealing with a lot of people in this community where English is not their first language, you shouldn’t be taking this personally.
The way I see I have not been disrespectful to you in any way so far… I tried to understand where you were coming from to understand what was the problem. I understand how my reply could sound like RTFM, but since your question didn’t give that much information on what did you try and where did you fail, it doesn’t help either.
You shouldn’t come to the forum and expect that people will do the work for you if you are not willing to provide enough information or discuss the problem you are facing. Anything you get out from this thread is a bonus, no one owes you anything.
It’s actually not that complex if you are coming from Webpack, I’d give it a try if I were you. BTW, It seems that Parcel 2 has been announced. You could check if have better luck using it as well.
3
fceruti
Yeah, probably. Been under a lot of stress lately, so I guess my reading glasses are a little tarnished. Sorry about that 
Great, thanks for the tip 
3
TwistingTwists
Hey. I just tried installing dart-sass and following is how my plug from endpoint.ex looks.
I added priv/static/assets and removed assets/ from only:.
but I get the following error when i run mix phx.server and the page is NOT styled.
(Phoenix.Router.NoRouteError) no route found for GET /assets/app.js (SassStarterWeb.Router)
(sass_starter 0.1.0) lib/phoenix/router.ex:406: SassStarterWeb.Router.call/2
Can somebody help me set endpoint correctly?
0
TwistingTwists
just for future reference – I did following and problem solved.
- renamed
phoenix.cssinassetsfolder tophoenix.scss - in
app.scss(renamed like above) → changeimport phoenix.csstophoenix.scss
That’s all!
reference commit :
1
teddylopez
This thread’s a bit old, but I recently came across this post explaining how to include SCSS and Tailwind together in a Phoenix 1.7 app, and it works perfectly. Many thanks to the original author @mikeclark. cc @fceruti
1