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

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.

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.

Thanks. Do you know websites that use Tailwind CSS?

@Nefcairon There are lots of examples here: GitHub - aniftyco/awesome-tailwindcss: 😎 Awesome things related to Tailwind CSS · GitHub

Tailwind is currently my default, and I’ve used it on a number of sites. I also know Derrick Reimer is using it on level.app. Still not exactly high profile, but more than nothing. This is a plus for me, but maybe a minus for some…using it does seem to require more knowledge of CSS than some of the larger frameworks.

I got links to some more sites using Tailwind from the Tailwind Slack room:

Agreed, although I would expect that using Tailwind is probably an excellent way of sharpening up one’s CSS skills. That’s just a hunch, but I think it’s very explicit nature probably helps clarify the way some parts of CSS work, eg the box model, or how margins collapse into each other.

I’d be interested to hear what you like about it in particular? And have you tried out other utility frameworks like Tachyons? The main appeal of Tailwind for me is being able to customise it so easily. I can change the default breakpoints, make sweeping changes to the naming system, and do things like change all the rem measurements back to pixels (contentious for some perhaps - but I have researched it). I’m yet to try out bundling up a collection of the utility classes into a component. Is that a feature you’ve found useful?

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.

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.