Poll Results: UI Development Values and Tailwind CSS

These values are some of the things I've been thinking about a lot lately as I've been on a journey to become a better interface developer. When you start with the values, the tools follow.

Here are the poll results of what these developers (in the DNN space) care most about when creating user interfaces:

1. Performance - generally file size / download times, how fast it renders: 14 votes
2. UX / UI / brand design - how the end results look and works for the user: 14 votes
3. Security and / or browser support - supporting IE11, for example: 9 votes
4. Maintenance - ease of upgrades and extending and coming back to the project to keep it up to date: 8 votes
5. Development speed - how fast you can build it and work with it to build new things: 7 votes
6. Features - perhaps CSS or JS features or components that you can use or easily integrate with: 5 votes
7. Accessibility - how well it works for screen readers, visually impaired people, etc: 5 votes
8. Device-specific experience - perhaps mobile experience: 4 votes
9. Multi-developer consideration - either handing off code or working with multiple developers: 4 votes
10. Personal enjoyment - working with a particular tool, or working in a particular style: 3 votes
11. Platform considerations - how well it works with a platform you're using: 1 vote
12. Ease of development - how easy it is to make things: 0 votes
13. Support - from the tools you use, or the community surrounding the tools or methods: 0 votes

The takeaway

It seems that the most important values are that the UI looks good, and it loads quickly. I was generally not too surprised by these results as these are definitely some primary values that I also hold.

My take

As people who know me know all too well, I'm a big Tailwind CSS advocate and I use it on all my projects. So it would be unlike me to not mention it and how I think Tailwind CSS objectively is currently better than any other approach or framework that is out there. Point by point, value by value, in my experience, here's how I think it achieves that:

1. Performance: because of the paradigm of utility-first, your CSS file starts super small and stays very small. I compared my completed websites with custom designs against a bunch of other DNN sites (my own and other DNN developers) and I found that my CSS file was typically a fraction of the file size of sizes that were less sophisticated in their designs. I recently took the average file size of about 8 sites that I built and the average size was less than 50kb for a completed website with custom designs.
2. UX / UI / brand design: because it's all utility classes, I find that it's easy to be consistent with the designs and super easy to experiment with different values. The whole idea behind Tailwind CSS is that it's unopinionated which means you sort of infuse it with your own style. So when a designer hands me a Figma or an Adobe XD with all the styles, I can rapidly (within 20 mins typically) set up all of their brand styles into the system, ready for me to use. The opinionated things Tailwind does have (that I leave as default) like typography sizes and spacing, I find to be quite nice. I've noticed a huge improvement over the end results as it looks more polished and consistent. Part of that is being able to try out different things as I go.
3. Security and / or browser support: At the time of the poll, I believe IE11 was still a supported browser but now it's officially unsupported. That said, the Tailwind developers care about making sure the framework works across all the important browsers. I haven't run into any issues yet. If you are in a tricky situation where you need IE11 support, Tailwind 1.9 still supports it. Security-wise, the output is just CSS so I think we're pretty safe.
4. Maintenance: Since the release of Tailwind 3.0, I've updated about 3 or 4 projects and it took literally less than 60 seconds to perform the upgrade from reading the documentation to just doing it. Class names don't typically change and the ones that do are well-documented.  At the end of the day, because it's all utility classes you don't need to worry about components being deprecated or changing in any major way. Because you apply all your classes to HTML tags, you can see what things do. And for the most part, your styles are localized to the component - you don't need to worry too much about making global changes that will affect things across the board.
5. Development speed: This is a big one. Tailwind CSS is super fast to develop in for a few reasons:
   1. No naming: this saves a shocking amount of time because you can just focus on what things look like and how they behave in different screen sizes. You don't need to name it something. The nice thing too is that when variations of a component you build comes along, you can mostly copy and paste what you've already built - no need to rename or make more names for things. (no more .card and .card2)
   2. Less context-switching: you stay in the HTML file for the most part. You don't need to jump between HTML and CSS. The CSS is generated as you write the HTML
6. Features: Dark mode, theming, prose-style typography for CMSs, line clamp, scroll snap, accent colour... the list goes on. Sure, you can do all this in CSS but all of these things are packaged into this framework and provides a consistent and reliable way of doing it. When it comes to JavaScript, because Tailwind CSS is just CSS, you can easily integrate it with any JS framework (or no framework) that you want. You can even use Bootstrap's JS components in there like I do occasionally.
7. Accessibility: Tailwind does leave this more open-ended but the nice thing is that it doesn't get in your way. As you make your own markup and classes, you can do whatever you need to satisfy those accessibility requirements. There are screenreader classes as well.
8. Device-specific experience: It's super quick to design for different screensizes because all the classes are available with breakpoint specific prefixes. Like md:flex or 2xl:bg-blue-500. You can even customize your breakpoints to whatever device you need.
9. Multi-developer considerations: When you're working with multiple people on a project, as I do with a programmer, all the Tailwind CSS class names are the same and interchangeable between projects. This makes it very easy for people to pick up your work and already know what it does. The more I work with Tailwind, the more disciplined I become and the more class names I remember. So now my programmer and I are basically speaking the exact same language.
10. Personal enjoyment - Tailwind removes or gets around a lot of problems that I've typically had in projects. Because of that, I can jump right into the fun stuff of working on building the best interfaces that I can. It's easier, it's faster, and it allows me to experiment and really fine tune and polish the design. What's more fun that that?
11. Platform considerations - Again, it's just CSS. So you should be able to integrate it into any platform. On many older projects that use Bootstrap, I'm integrating Tailwind in by disabling Preflight and then prefixing my classes. It takes 2 lines of code to it and then you can use Tailwind instead of Bootstrap or vanilla CSS on your older sites.
12. Ease of development - When you're only focusing on the HTML and you can see in front of you what each class is doing, it's just easier to work with. I can apply heights to certain elements at certain breakpoints or quickly apply abritrary values (using JIT) or animate things quickly. Everything feels more standardized and faster. Also, because it's all utilities classes, it becomes easier to share things not only between interfaces in the same project, but between other projects as well
13. Support - The Tailwind CSS YouTube channel has some of the best produced videos I've seen on YouTube (not to mention for a tech channel!) Simon breaks the concepts down quickly and easily and with lots of humour so I feel like I'm both learning how to use Tailwind better but also I'm learning how to be a better developer overall. And don't forget to check out their brand new documentation website which is one of the best I've seen.

So what's the downside?

1. You probably have to be decent at CSS. I suppose it's harder if you're not terribly strong in CSS. That said, it helps you learn CSS the more you use it.
2. It requires more setup and tooling than just doing plain CSS by hand. But once you've got the hang of it, it's shockingly easy and you'll be a more aware developer because of it.
3. There are no out of the box components you can use. However, https://tailwindui.com/ does provide that if you purchase a subscription. You can also find other free resources
4. FROM NOW ON, EVERYTHING YOU LOOK AT YOU WILL KNOW YOU CAN DO IT BETTER IN TAILWIND CSS (Just kidding... but not really)

"But wait a minute!"

1. "Can't I just do this in CSS or SCSS??" > Yep, you can. But it will most likely take you way longer and if you're not using utility classes, the file size will likely be larger and will continue to grow resulting in poorer performance.
2. "This is just another dependancy" > True. But it's probaby better than your homemade, custom dependancy that only you know.
3. "This blog / your site isn't in Tailwind" > That's correct. And that will change soon :D

To wrap up

I didn't choose to use Tailwind CSS because it's the hottest new thing or because all the cool kids are doing it - I choose to use it because, time and time, again it seems to outperform other approaches and frameworks not only on the values that I hold the most, but even on some of the values that I place as lower priority.

This is my experience. I'm basing this off a 16 year career of working with CSS on a professional level with clients who care deeply about getting the best interfaces for their websites, apps, landing pages, and email templates. Should a different paradigm or framework come along that performs better on these points, I will happily move to that framework. I feel like I've been pretty objective with my assessment from using this framework for over a year now.

And if any of these points resonate with you, I would urge you to give it a try yourself. That's the only way you're going to know if it works for you. If not for yourself, do it for your users.