A couple of weeks ago, Tailwind team has released 1.0.0-beta.1. Tailwind has been growing exponentially, and the step of defining a stable API is an important milestone in the road.
I have created a template for Joomla that implements Tailwind CSS. Now, it is time to publish the second version of the template that empowers this blog: anibalsanchez/XT-Tailwind-for-Joomla v2.0.0
How to update to Tailwind CSS v1.0.0-beta.1
The update to v1.0.0-beta.1 is relatively straightforward. Most classes and the development workflow remain the same. The main change has been located in the configuration file that has been completely reorganized. The detailed procedure to upgrade can be found here: https://github.com/tailwindcss/tailwindcss/releases/tag/v1.0.0-beta.1
From my notes, these steps have been necessary to update:
Update the Tailwind framework
npm install tailwindcss@next --save-dev
Update the configuration file
In the recommended procedure to upgrade, there are detailed steps to transform the configuration file. I preferred to paste the whole default config file, and renamed it to the new recommended file name: tailwind.config.js. Then, I re-applied the colors and the spacing of this blog style.
- "@tailwind preflight;" has been replaced by "@tailwind base;".
- "list-reset" has been deprecated. So, it must be redefined as "list-none p-0" or "list-disc pl-4".
- Titles are no longer stylized. Just add "font-bold".
- opacity may also require attention.
After the upgrade
Tailwind has now a brand new API. We can preview that the final version will have the same level of flexibility and expressiveness that we enjoy today.
From the analytical point of view, the performance results are excellent, on the 90tish level.
To the moon!
Preparing the talk for Mastermind Podcast, these are my notes about Web Services quick testing 101:
- Step 1: Download and Install Joomla 4 Alpha 7
- Step 2: Notice that there two new plugin groups: api-authentication and webservices
- Step 3: Notice that there two new plugins: API Authentication - Basic Auth and Web Services - Content
- Step 4: J4 A7 has API Authentication based on Http Basic Authentication. So, yes, you have to configure .htpasswd to test the API. Ref: http://httpd.apache.org/docs/2.4/programs/htpasswd.html
- Step 5: Of course, if you are a little bit lazy, you can go straight to plugins/api-authentication/basic/basic.php, and change the authentication or create your own plugin.
- Step 6: Create an article and access the REST API for the Content component. For instance: http://mytest.com/api/index.php/v1/article/1
For more information:
To the moon!
At the end of 2018, I promised myself to continue renewing the tools that I used to develop sites and apps. Tailwind CSS is positioned as a new utility-first CSS framework for rapidly building custom user interfaces. In search of new modern techniques for Joomla, Tailwind falls naturally in this category for Joomla.
Beyond the basic definition, we can discover the answer to the question What is Tailwind CSS? In the words of one of its creators, Adam Watham.
It is all about the process
As shown in the previous article or the video, Tailwind offers a set of utility-oriented classes to create a user interface rapidly. It is a tool to compose a new design interactively.
To summarize, the framework offers:
- Text sizes, colors, and weights
- Border colors, widths, and positions
- Background colors
- Flexbox utilities
- Padding and margin helpers
If Tailwind is a language, we can write it in Visual Studio Code with two handy extensions: Tailwind CSS IntelliSense and Tailwind Docs.
In Joomla terms as a Template
Tailwind CSS can be adopted in Joomla as a template. I have created a starter project, based on Webpack, and reproduced the old template of my blog on Tailwind to create a new template. Additionally, Roberto Segura has also created his template for Tailwind, based on Gulp.
- anibalsanchez/XT-TailwindCSS-Starter, a starter project, based on Webpack. The original Webpack project is tailwindcss/webpack-starter.
- anibalsanchez/XT-Tailwind-for-Joomla, my blog template on Tailwind
- phproberto/tailwind-joomla, a template for Tailwind, based on Gulp
How this new playground works
The video Rebuilding Netlify with Tailwind CSS shows from first-hand how the experience unfolds. So, you can start with anibalsanchez/XT-TailwindCSS-Starter, run npm install and npm run dev to start writing classes and changing the bare-bones prototype of this blog template. When you reach the final version, you npm run prod to produce the final assets.
The crucial part of the development process for Joomla is how to adopt this rapid cycle of prototyping inside a template in the context of a CMS. anibalsanchez/XT-Tailwind-for-Joomla packs the template for Joomla AND the starter project. In this way, you can install the template on the Joomla site, go to the templates/xttailwindcss folder, and run npm install and npm run dev. At every step of the customization, you can modify the files in the src folder, and then check them in the Webpackdevelopment server or in the Joomla output. Again, when you reach the final version, or you can deploy the changes to the site, you create the template assets with npm run prod.
In my view, the best part of the process is producing a prototype, move the files to a template, and then interpret the same design in the CMS context.
Notes from the road
- This is the first version of the template for Tailwind-Joomla, mainly guided to reproduce the original design of the blog in a new template.
- It is optimized and running fine on mobile devices, but the original design has SVG backgrounds in several layers that are a nightmare. I plan to drop them as soon as possible.
- No template overrides. Joomla overrides are always discussed in the context of adopting a CSS framework. Now, with Tailwind, we can avoid overrides and apply CSS components to the regular Html output.
- No legacy code. This template does not include any script than what we need for Tailwind.
- A note of caution. If you plan to use this template, it is NOT compatible with any other script or extension, and you must check them one by one.
- There is still room for speed improvements. However, the results are encouraging:
Tailwind CSS comes with a lot of new ideas and innovation. It's not even in the v1.0 (0.78 is the current version), and it looks like the new version is going to break compatibility in a big way to bring consistency, new features, and documentation. Adam is posting the progress preparing the first here: https://adamwathan.me/journal/. Exciting times are ahead!
In the October edition of the Joomla Magazine, I've started a series of articles about Joomla modernization. The first instance of the series is Talking about a Modern Joomla.
The first article has been aimed to be a conversation starter about the general need for a change of vision, from how the CMS was originally designed and the new requirements of a modern website.
Now, the second article of the series is almost out!
- Extly Tech
- Team Leader / Senior Developer
- Empower your project with our web solutions
- Today, working on Laravel, Amazon AWS, and Ionic/ Angular
- A Joomla Volunteer