Problems with Twind v0
8/1/2023, 9:50:46 PM
This is a follow-up of a previous post about my experience with Deno so far, where I mentioned that Twind deserved a whole post, this is said post.
Miscommunication
One minor thing about Twind on Fresh is that it's not clearly labeled as Twind when you start a new project. You get prompted about installing Tailwind, not even a version is provided (Twind uses the Tailwind v2 classes, not v3). This can trip up people who aren't expecting to need to manage the difference in behavior and configuration between both.
If you don't customize your config file, you might even not initially notice the difference. I don't get why this is the case, I would still opt to use it if I was told that I was being suggested a JIT Tailwind clone, but it is what it is.
Versioning
I want to preface this post by stating the obvious: I'm aware that v0 packages are unstable, that's why they are versioned this way. But I would expect that a stable package (Fresh, in this instance), would have somewhat stable internal APIs, so I assumed this would just work. It doesn't.
Unexpected Behavior
OK, so the previous two points are pretty minor, but this was a major issue when I first started using Twind v0. Tailwind v3 has some really major quality-of-life changes that help styling elements dynamically, or adding custom properties on the class name. Very often, this won't work as you expect in Twind v0. Here are some examples:
You can't use color-[red], bg-[red] or border-[red] because that converts to position attribute instead of coloring the element. red is being used here as an example, nothing you put in between brackets will change the element's color.
You can't use CSS data types to coerce to the correct attribute either for this issue either.
Tailwind doesn't require that you wrap variables with var() either, but in the rare cases that Twind accepts custom values between brackets (like for fill), it will be required to make it work.
Because Twind mimicks Tailwind v2, some classes were renamed when Tailwind v3 released and won't be applied correctly. Some of the classes that will fail to apply as expected, forcing you to check the Tailwind v2 docs to figure out what is old version name (e.g. grow in Tailwind v3 is flex-grow in Tailwind v2 and Twind v0, shrink-0 in Tailwind v3 is flex-shrink-0 in Tailwind v2 and Twind v0 and so on).
Various utility classes of Tailwind v3 aren't available in Tailwind v2/Twind v0, e.g. none of the 'backdrop-blur' classes are available.
Some Twind properties are applied in the wrong order than applied in the class list, you have to use as inline styles instead for CSS specificity. Changing the order in which the classes are applied to the element doesn't matter either, Twind will still unproperly apply them to the element. This meant that if you wanted to reuse another class, like btn, you maybe wouldn't be able to change its background-color, border-color because those attribute classes were applied before the btn class.
What does this mean?
Why do these matter? Because it slows down your development process. If you are used to Tailwind v3 like I was when I started working with Fresh, this puts breaks consistently in your workflow. You can't just blindly hammer away code using Twind like you might be used to with Tailwind, you need to check if your individual styling for every element worked as you expected it to. When it doesn't, you have to inspect the element to see if the proper class was applied and, if not, go visit the docs to double check if you used the proper class or it has a different name in that version.
It's a lot of additional mental overhead that you have to track when the entire purpose of the tool is to improve and speed up your development workflow. So why didn't I drop it entirely and went ahead to use something else instead?
I actually initially did and wrote my own CSS files and managed my own classes without Twind. However this eventually created another problem where I was importing a complete CSS file only to use a few of its classes, something that Tailwind manages for you automatically, by purging unused classes on the build step. I just had to make Twind work FOR ME, instead of AGAINST ME.
Solution
What I had to do to solve this problem was creating my own custom Twind classes in the twind.config.js. That way I could always ensure the correct CSS properties are being applied and used with the correct order to not override each other.
If you want to customize your twind.config.js file, I have a separate blog post about how to do so here or by clicking Next on the navigation bar.
A Brighter Future
Since the halfway point of 2023, Fresh can now use Twind v1, which is stable and actually uses a "port" of Tailwind v3. Switching to it essentially solved every issue I was previously having with v0, including the classes not being applied in the correct order.
Unfortunately, this is still not the default dependency for starting a new project (as of the day of this post) and you are still forced to manually migrate your Twind v0 dependency to Twind v1 manually. Still, better than nothing, right?