danielrlcl

Tailwind CSS in a Phoenix app – configuration problems with Brunch and PostCSS

I’ve been trying to get Tailwind CSS running in a Phoenix app, but have run into configuration problems with Brunch. I’ve followed the instructions in the Tailwind docs and here https://stackoverflow.com/questions/48654765/add-tailwindcss-to-phoenix-with-brunch, but my main app.css file is just showing @tailwind preflight; etc at http://localhost:4000/css/app.css. So it looks like the build step is messed up somehow. I’ve looked in the postcss-brunch docs but not found an answer there either.

Can anyone help? I’ve been getting help in the Tailwind CSS Slack room, and I’m pretty sure I’ve got the Tailwind side of things set up correctly, so maybe this is a postcss-brunch problem?

I’ve also been pointed to this project https://github.com/levelhq/level/tree/master/assets which is a Phoenix app which uses Webpack as the build tool. Any thoughts on my switching out Brunch for Webpack? I would just rather stick to the well-beaten path if possible.

9 comments

/phoenix #frontend #css #tailwindcss

12 2667 9

2018-09-11 20:55:04 UTC

Marked As Solved

danielrlcl

I just got this answer from Adam Wathan, the creator of Tailwind CSS, in the Slack channel:

“you need to install postcss-brunch from inside the assets folder
so everything should be done from inside that folder”

It seems we both made the mistake of installing postcss-brunch in the root folder by accident.

Post #2

Also Liked

danielrlcl

By the way, I see Tailwind CSS hasn’t yet been mentioned on this forum. I really recommend taking a look at it https://tailwindcss.com/, as it’s a functional/atomic utilities-first CSS framework that’s highly customisable and may well appeal to anyone who likes functional languages like Elixir.

Post #3

thomasbrus

Tailwind is awesome! What I like:

nice and descriptive class names, not too long and but not too cryptic either.
being able to customize it, especially being able to customize the colors
comprehensive; it covers almost all frequently used css properties
@apply .classname to create new components from existing tailwind classes.

Post #9

ckhrysze

Very much so. I’ve been using Tailwind mostly in conjunction with Vue.js, and often find myself creating components that are simple elements with several Tailwind classes applied.

This is probably the only thing I have customized at this point, but I do love being able to easily set the brand color (or colors) to the common name, and have that just work everywhere.

As to the other question, I haven’t used another utility framework like Tachyons but have used several small frameworks ( Bulma comes to mind ) as well as a few large ones like Bootstrap. I both enjoy Tailwind more, and agree that I’ve learned more about CSS since making the switch than I had in a much longer time span prior.

Post #10