In the past month, due to a series of astronomic events, I talked about Tailwind in two video sessions, doing live coding on Youtube. I've realized that it is tough to do it well and the work that Adam Wathan does (the original Tailwind author) promoting Tailwind CSS is exceptional. Check Adam's Tailwind video channel.

Beyond the recording difficulties that we faced in the talks, I realized that there are several frequent questions about Tailwind CSS on Joomla. In this article, I'm going to answer them.

What is Tailwind CSS?

It is a utility-first CSS framework. Of course, the next question is what is a utility-first CSS framework. The idea of being "utility-first" is that the framework provides the tooling to build a template and design.

At first glance, Tailwind CSS only is a "language" (e.g. text-purple-500) and "tools" to generate the CSS stylesheet. Nothing more and nothing else. The semantic of the language is also straightforward, and it can be directly translated to the equivalent CSS Styling. The beauty of the Tailwind language is that it is consistent, organized around the core CSS concepts.

The utility-first classes are a layer of syntaxis on top of traditional CSS. So, at any time, you can also combine them with regular CSS styling.

What is the main difference with Bootstrap?

Bootstrap comes with everything that you could need, "Batteries included". For instance: Alerts, Buttons, Navbars, Spinners, Modals, etc.

On top of that, if you choose a template created by a Template Factory, the template has Bootstrap, the theme created by the Factory and the additional features that they could have been added.

Finally, Bootstrap defines a way to add assets, but a few people dare to remove something; just in case it is used. All of these practices generate a considerable load of styles; that in practice, most of them are not used. In modern times, where being mobile-first is the key, Bootstrap price is high on bandwidth usage and response times.

On the other hand, the output of a Tailwind definition and processing can be nothing or only the essential cross-browser normalization.

Do you have to design everything from scratch with Tailwind CSS?

Yes, but...

• Tailwind's language is expressive, and the semantic is clear. It removes the pain of remembering CSS styling.
• The results of the style definition are compiled and optimized. The final results are minimal. The stylesheet load is reduced to a few Kilobytes.
• The final styles can be agnostic. It is your design. The produced stylesheet could not provide any clue about being internally generated with Tailwind. Additionally, in terms of migrating a legacy system, you could redefine the current classes to renew a design. For instance, you can take the classic Bootstrap 2.3 row and span classes and redefine them in a grid system. Reference: Grid Template Columns

Is Tailwind CSS better than Bootstrap?

No, they can't be compared. Bootstrap is more like a CSS framework to quickly build prototypes, combining classic components to produce a blueprint. On the other hand, Tailwind CSS is a framework to create a design optimally, writing what you need and compiling what is going to be used.

Is developing with Tailwind CSS time-consuming?

Tailwind CSS has a learning curve. Firstly, you learn the "language" and apply it in simple HTML files. The official documentation is complete; and there are also a good number of community sites, cheatsheets, extensions for VSCode, etc.

Secondly, the "tooling". Tailwind CSS framework is built on top of the latest tools of the JavaScript ecosystem. You don't need to know how to develop with JavaScript, but it is recommended to be familiar with JavaScript terminology for front-end development. Technically speaking Tailwind is powered by PostCSS, a tool for transforming CSS with JavaScript. So, all the goodies and complexities of this world are also found in Tailwind.

Once you understand that essential process to develop a design, and after several iterations, it is time to conceptualize and build your own "components" or "modules". You can produce your visual definitions, your library of patterns to re-use them on different projects. At this stage, the final products can be produced very rapidly. Tailwind Framework is very young; however, there are already offers providing high-level components that help to speed the process of defining a bespoke library of elements.

So, the final answer about being time-consuming depends on what are you comparing. Sometimes, customizing Bootstrap takes a lot of time and produces an average result (> 300Kb of styles). Every Bootstrap project has to start from the basic definition. Then, the same steps to customize the template and the theme have to be completed. The Bootstrap customization takes a defined amount of time and it is not going to be faster in the next project.

How Tailwind CSS can be incorporated into a project

The procedure is not settled in stone, and it depends on your practice. According to my experience, this is the procedure that better works for me:

1. Mockup the design, in a few fast HTML prototypes, with inline Tailwind CSS. Test on mobile since the onset. If you are going to re-use Joomla-generated HTML, you can copy-paste the current HTML output to match the structures and classes with the Tailwind output.
2. Optimize the styles, moving from the raw inline HTML to proper stylesheets. Avoid duplication of classes definitions.
3. Define components, if there are known UI components (Buttons, Navbars, etc.), reorganize them in components (nested CSS). Review similar available Tailwind components or express components with Tailwind classes.
4. Integrate the resulting stylesheet on the site.

Conclusion

As a caution note, Tailwind is brand new (v1 released a year ago, on May 13, 2019). It is a technology that must be interpreted in the context of Joomla.

In my practice, if it's possible, I'm currently implementing Tailwind without compromises: using Tailwind implies the total removal of Bootstrap legacy. Under this premise, all extensions styling has to migrate to support the new framework. Where this approach is not viable, it is better to stick with Bootstrap and build snippets of Tailwind styles for independent components.

If you are decided to learn or test Tailwind to see how deep the rabbit hole goes, here I leave a few useful links:

• Tailwind CSS - Oficial Page
• Tailwind UI Components - Oficial Page
• Tailwind CSS - Community Components
• Made with Tailwind CSS
• Tailwind Cheat Sheet
• Tailwind CSS Sandbox, a sandbox to test Tailwind language
• Awesome Tailwind CSS

And, these are my personal tools:

• Introduction to TailWind CSS in Joomla - Tim Davis' Watch Me Work 068
• Tailwind CSS Webpack Starter Project
• My Blog's template for Joomla, based on Tailwind CSS

To sum up, there are a whole set of modern tools coming, inspired by the latest developments and ready to produce fantastic results. They are far from being perfect, and the challenge is learning how to go beyond the original playground and implementing them on real complex sites. Tailwind CSS is only one of the new arrivals that are coming. Say hello and give it a friendly welcome.