Reading Time: 2m32s
One of my pet peeves is a package manager which unnecessarily bloats a project. npm, yarn or any other JS package manager are great tools, but they can be overkill for small projects. In this article, I will walk through using Tailwind’s standalone binary as the CSS framework for this personal website.
| Aim | Ideas |
|---|---|
| Choose a styling tool | tailwindcss, bootstrap, muicss, css |
| Small dependency impact | Ideally not need a JS package manager |
Tailwind is a utility-first CSS framework for rapidly building custom designs. It provides a set of pre-defined classes that can be used to style HTML elements. Tailwind is highly customizable and can be used to build complex designs with ease.
I enjoy the utility-first approach of Tailwind, which allows me to build custom designs quickly and easily. It also provides a lot of flexibility and customization options, which I find very useful.
As tailwind compiles into a static css file, it can be easily integrated into any project. This makes it a great choice for small projects that don’t require a JS package manager and other bundler tools.
I found that tailwind has a standalone binary which can be downloaded and used without any dependencies.
1# Example for macOS arm64
2curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
3chmod +x tailwindcss-macos-arm64
4mv tailwindcss-macos-arm64 tailwindcss
After downloading the binary, I’ve setup some common workflows inside a Makefile:
1tailwind:
2 ./tailwindcss -i static/styles/global.css -o static/styles/tailwind.css --watch
3
4prodStyles:
5 ./tailwindcss -i static/styles/global.css -o static/styles/tailwind.css --minify
This means that I never needed a package.json for dependencies and neither had to install any additional dependencies. Another cool side-effect of using tailwind is, I could blend defining styling classes wihin raw html but also inside some of my go files which defined some standardised components.
To build a simple badge, I can define a type-safe structure like below in go. Along with styling variants, which tailwind will pick up and generate the appropriate CSS classes.
1type Badge struct {
2 Label string
3 Color BadgeVariant
4}
5
6type BadgeVariant string
7
8const (
9 BadgePrimary BadgeVariant = "bg-amber-700 text-amber-200"
10 BadgeSecondary BadgeVariant = "bg-stone-700 text-stone-200"
11)
All I need to do to link this up is inside my theme.css theme provider css file, point tailwind to where my go components live:
1@source "../../components/**/*.{go}";
This unique blend of type-safe definitions where the go compiler becomes a friend, and the utility classes from tailwindcss, allows me to create a seamless and efficient development experience.
Pretty nifty I think! 🚀