Hyvä magic with Alpine and Tailwind
TailwindCSS is a utility-first CSS framework that scans specified locations for utilized CSS classes, resulting in production styles that only include necessary CSS classes. While this concept may initially seem odd, I'll do my best to simplify its understanding for you.
In tailwind.config.js you can indicate which directories will be scanned by TailwindCSS
This utility-first framework utilizes low-level CSS classes that serve specific purposes. For instance, in TailwindCSS, the class "flex" contains only one property - "display: flex;". Similarly, the class "text-center" aligns your text to the center. This methodology eliminates the need to repeat CSS rules. Instead, by employing the utility class "flex", you can effortlessly implement the "display: flex;" property.
Scanning files by Tailwind CSS
TailwindCSS scans all specified files during the CSS build process. It automatically detects utility classes and adds them to the final styles. By doing so, it ensures that only the necessary utility classes are included in the final styles. As a result, there is no redundant repetition of CSS rules, resulting in a significantly smaller bundle of styles.
This approach is clever, but it doesn't work perfectly with CMS blocks and CMS pages used in Magento 2. As mentioned before, Tailwind scans for utility classes in identified directories, but our CMS blocks and pages are stored in the database rather than the repository. Consequently, Tailwind is unable to scan our CMS content, and if we were to use a TailwindCSS class that isn't used in the repository, we wouldn't be able to utilize it as it wouldn't be added to our final styles file. Simply said Talwinds classes that are not used in the repository won't work.
In addition, I believe that dealing with complex components can be challenging for non-technical people. It is extremely easy to make minor mistakes, such as typos or forgetting to close a class tag. As a result, I believe there is a major risk in providing the customer with complex code that is not human readable.
As you can see, there are a lot of places where someone can make some mistake and break this section of code.
There are a few solutions that can help you work with CMS’s. You can use:
- CMS Tailwind JIT compiler prepared by Hyvä theme,
- Magento Pagebuilder, which styles using TailwindCSS are also prepared by Hyva Theme,
- Custom Widgets, which is my favorite solution. Widgets are a hidden gem that are not used as much as they should.
You will be able to read about these solutions in the next post.