After publishing XT Tailwind for Joomla (anibalsanchez/XT-Tailwind-for-Joomla, XTTJ for short), I have been receiving questions about Tailwind CSS and how to implement it on Joomla. I have summarized them here for future reference. These are the frequently answered questions:
If I build a site with XTTJ, are the other extensions compatible?
No. Most Joomla extensions are currently built based on Bootstrap 2 and jQuery. XT-Tailwind-for-Joomla does not load Bootstrap and jQuery (or any other library or third-party script) to keep the template minimal in the implementation of the original Tailwind CSS distribution.
Are you building a "generic template" with Tailwind?
No. At this point, we are developing several sites using this project (anibalsanchez/XT-Tailwind-for-Joomla) and adapting it to our requirements. Since the toolchain has node, PostCSS, Webpack, and other tools not meant for live sites, then porting XT Tailwind for Joomla to a LAMP site is not possible.
Can Bootstrap and jQuery for maximum compatibility be included in XTTJ?
Well.... technically, yes. They can be included. I strongly discourage the practice. The objective of XT Tailwind for Joomla is leaving behind Bootstrap, jQuery and the old stuff to develop based on modern web practices. If you have a project where you have to use Bootstrap, then use Bootstrap. The point of XTTJ is not adding more frameworks stuff to Bootstrap.
The XTTJ template does not have <jdoc:include type="head" />, why?
The jdoc:include tag is the way that Joomla inserts all the classic scripts. Since XTTJ avoids them, the tag is not included. To add new files, you must declare them. For instance, in this way:
// Add Stylesheets
$templateCssFile = CMSHTMLHelper::stylesheet('template.css', ['version' => 'auto', 'relative' => true, 'pathOnly' => true]);
$prismCssFile = CMSHTMLHelper::stylesheet('prism.min.css', ['version' => 'auto', 'relative' => true, 'pathOnly' => true]);
How to integrate other extensions with XTTJ
In many cases, only a few lines of CSS or JS are needed to retain compatibility. For instance, this is the style adjustment to integrate the language selector of the Blog.
.languages-element ul {
@apply flex items-center mt-0 ml-6 pl-6 list-none p-0
}
.languages-element li {
@apply list-none p-0
}
.languages-element img {
@apply px-2 py-2
}
Additionally, Joomla has Output Overrides to include code that it is not originally included in an extension. So, the view can be adjusted tweaking the HTML, adding CSS/ JS code.
Really, how extensions should adopt modern practices?
The short answer is using plain CSS and Vanilla JavaScript. In general, Joomla extensions only use just a little bit of Bootstrap or JavaScript, and they would be in a better place if they migrate to plain CSS and Vanilla JavaScript. Looking into the future, WebComponents technology is a key technology that could help to package extensions. Check Stencil toolchain.
Where can I find Talwind CSS coolness, inspiration, themes, widgets, etc?
- aniftyco/awesome-tailwindcss A curated list of awesome things related to Tailwind CSS
- Tailwind CSS Discord https://discord.gg/7r2mzm
- Of course, the original documentation https://tailwindcss.com/
- https://builtwithtailwind.com/ A collection of awesome websites built with Tailwind CSS.
- VS Code Extensions for Tailwind: Tailwind CSS IntelliSense bradlc.vscode-tailwindcss and Tailwind Docs austenc.tailwind-docs.
How do you customize the XTTJ template?
The template has everything to be developed outside of Joomla CMS, including a prototype HTML page (template/src/index.html). The template folder has the main tailwind package, where you can design. Once, the template is ready, you can run the command to produce the template deliverables (npm run prod, in the template folder) and the build script at the root folder of the project, to pack the template and distribute it.
Is Tailwind CSS installed on Joomla?
No. Tailwind CSS is a framework for web development. It is powered by PostCSS, node, and other tools for web development. So, they only exist in the web developer setup. Once the developer compiles to create the final deliverable, then it is a customized package for a project.
To the moon!
