Tailwind without NodeJS

Phoenix Forum Chat / Discussions
, , , ,
1

While working on my new Phoenix 1.6 application I was annoyed that we still need to install NodeJS if we’d want to use TailwindCSS.
Then I stumbled across this blog post that introduces a standalone CLI for TailwindCSS (it mentions Phoenix by name!) to use TailwindCSS without having to use NodeJS.

So I built a small package that pretty much does exactly what esbuild does (which ships with Phoenix), but does it for the TailwindCSS CLI.
The idea is to make straightforward using Tailwind in your Phoenix (1.6+) application without needing to install NodeJS.

Links:

I threw it together rather quickly and it’s my first published package, so feedback is most definitely welcome, and I hope it proves useful to someone besides me.

Cheers

28 Likes
2

Hey @dealloc – Nice work! The phoenix team actually went to start on this very thing today. Any interest in transferring to the Phoenix org so we can own esbuild and tailwind packages without duplicating efforts? :slight_smile:

11 Likes
3

hey @chrismccord of course! Had I known you guys were working on this I would’ve patiently waited :wink:
If you can give me some guidance on how to get that started I’m more than glad to transfer!

13 Likes
4

For the hex package:

$ mix hex.owner transfer tailwind chris@chrismccord.com

Then on GitHub, got to the settings page and near the bottom is the “Danger Zone”, and you can click transfer and transfer to the phoenixframework org.
https://github.com/dealloc/tailwind_cli/settings

Thanks for doing the leg work on this! I am beyond excited that we now have a dependency-free tailwind experience for phoenix users!

10 Likes
5

I transferred ownership for the hex package, but when I try to move the Github repository into phoenixframework I get the error “You don’t have permission to create public repositories on phoenixframework”
any workaround?

I was so excited when I came across the dependency free Tailwind CLI that I just had to integrate it, esbuild did it so effortlessly I couldn’t resist building something similar

4 Likes
6

Thanks so much! I’ll push the repo up on my side :heart: :heart: :heart:

6 Likes
7

How can I use Tailwind CSS IntelliSense - Visual Studio Marketplace when installing tailwind with this package?

I get this error from the plugin:

[Error - 11:10:05 AM] Tailwind CSS: Can't resolve 'tailwindcss' in '/<path-to-app>/assets'

So the plugin finds the generated tailwind.config.js but not tailwindcss.

When I install with

npm install -D tailwindcss

the plugin works.

8

You’ll need to copy the binary to somewhere in your $PATH if the vscode plugin requires it to be available globally

9

I copied _build/tailwind-linux-x64 to the path, also tried renaming to tailwindcss - still does not work. Also npm i -g tailwindcss does not work.

10

This is really very exciting! And kudos to the tailwind folks for accommodating to those of us who don’t care much for nodejs.

11

Thanks @dealloc and @chrismccord, I heard about this today and spent 15 mins updating my blog to remove NodeJS and the other dependencies.

It all worked a treat and I documented what I did here.

Thanks again guys.

3 Likes
12

Hey @Sebb , I think that’s a bug in the vscode extension. This github issue is a bit of a grab-bag but some of the comments down thread make it clear others are having issues getting tailwindcss-intellisense to find the standalone tailwindcss executable.

I’m keeping a watch on that issue. In the meantime I’ve npm installed tailwind in my assets folder, just for the extension’s use, and excluded all the resulting node cruft in .gitignore. Ugly, but I find it just about worthwhile as a workaround.

1 Like
13

ah, sorry, I misread npm install -D as npm install -g. Sounds like the vscode package loads it from the local node_modules directory, so I don’t think there is anything that we can solve without the extension supporting finding it elsewhere

1 Like
14

Switched my app from node tailwind to tailwindcss and got rid of all development dependencies including postcss. I already have nodejs setup for other js files, but it’s still better to have a dedicated package take care of tailwind.

Thanks everyone included in the effort.

1 Like
15

Tailwind Intellisense 0.7.5 was just released which bundles the tailwindcss cli with the extension. If no binary is found, the extension will use the bundled version provide completions.

4 Likes