How to Use Tailwind CSS in Drupal

Promet Source has developed and deployed an open source, component-based design system called Provus, 

Utilizing Tailwind CSS, we have taken Provus to the next level.

What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Compared  to other CSS frameworks, such as Bootstrap or Foundation, Tailwind CSS does not come with predefined components. Instead it is built upon a set of CSS helper classes. Utilization of these classes allows for the efficient creation of custom designs within Provus. 

By adding these classes to our markup, rather than creating separate CSS stylesheets, we are able to streamline the site building process within the framework of HTML/TWIG markup. The result can significantly decrease development time, while ensuring a high degree of consistency and quality.

The CSS that is generated by using Tailwind CSS, only uses the classes that have been used in the markup, resulting in a single CSS file that is much smaller than would otherwise be the case. 

Another great benefit of using Tailwind CSS is that it can be used with any design system that is currently in use – effectively trimming excess fat from the theme to create a lean design system that’s free of unnecessary bloat. 

How Does Tailwind CSS Enhance Provus?

Provus uses a design system called Emuslify, which is a component based web design system. Combining Tailwind CSS allows for greater leverage, components built within Provus, eliminate the need for CSS stylesheets for the vast majority of the components.

This leads to simple TWIG configuration changes per component, and quicker development time. Additional benefits include:

• Reduction of technical debt,
• Reduced file sizes,
• Fewer files to maintain, and 
• Greater efficiencies and accelerated timeframes for further enhancements.

Why It Works

Removing the vast majority of stylesheets significantly reduces the size and complexity, accelerating the build process. 

This is largely because there is no longer the need to create unique style sheets for each component. Plus the creation of reusable sets of classes helps to speed up development time. 

Ultimately, the result is the ability to develop more features within an accelerated timeframe. 

With a smaller technical footprint, sites will load faster. This translates into an array of advantages that includes improved SEO.

Moving Forward

Since Provus is open source, the entire Drupal Community stands to benefit from further the integration of Tailwind CSS into the Provus component-based web design system. 

Our goal has been to develop a platform that developers at all levels can use. With the integration of Tailwind and Provus, it is not necessary to be a front-end developer in order to build a Drupal theme. 

In reinventing a new system for creating CSS and components within a Drupal site that integrates Tailwind CSS and Provus, Promet is igniting new possibilities that will lead to happier clients and continued innovation.

Want to learn more? Contact us today.