Best practices riding Tailwind CSS

A lot is going on in the Tailwind CSS, if you want to catch on with the latest news and the success that the framework is having now, please, check Adam's post Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business.

This post is about the best practices that I'm currently applying to the development of templates based on Tailwind CSS. Tailwind CSS is a utility-first framework, powerful and expressive, but a lot has to be adapted down the line to have a final product. 

Today, I'm releasing XT Tailwind for Joomla v4.0.0 with full re-organization and several improvements.

XT Tailwind Project Re-organization

I received feedback about the project organization in a single repository. Until now, I've been developing the template with everything in a single place: Webpack scripts, composer libraries, build scripts, etc. At the high level, the project has had two levels, the build scripts to produce the installable extension and the scripts to support Tailwind CSS. To reduce the complexity, now the project has been separated into two repositories:

In this way, if you are only interested in the template and the Tailwind CSS implementation, you can check the template repository and run the commands there to test the water or design a new style.

Using Tailwind Functions & Directives

Tailwind is a thin layer of handy utility classes. On top of that, it has powerful tooling to minimize the duplication of code and speed the process of design. For more information, check Functions & Directives. From that chapter, the best tip is the following declaration of a class style with a pseudo selector and media queries in a brief snippet of code:

.btn {
    @apply block bg-red-500;
}
.btn:hover {
    @apply bg-blue-500;
}
@screen md {
    .btn {
        @apply inline-block;
    }
}

The template is currently using these techniques in several ways.

A growing set of plugins

Tailwind ecosystem is growing; the template now includes the official plugins, updated to the latest versions:

  • Update @tailwindcss/custom-forms 0.2.1, a better base for styling form elements.
  • Update @tailwindcss/typography 0.2.0, a plugin to inject Typography.js styles.
  • Update @tailwindcss/ui 0.5.0, beautiful UI components.
  • Update Tailwind CSS 1.6.2

Webpack-based development

With the separation of the project into repositories, the build script for the extension is based on our Extly practice to package solutions and the template repository has the script to develop and design based on Tailwind CSS. Both of them powered by Webpack. In particular, the Tailwind project can be executed in the following modes:

  • Development Mode
  • Proxy Server Mode for Joomla
  • Development Build
  • Production Build

PostCSS for Tailwind CSS

Tailwind is characterized by the generation of all possible classes, based on colours, font sizes, etc. To control the size of the deliverables, the step of optimization for production is critical. I've started with the development of the template well before that Tailwind CSS started to support the purging of classes. So, the template project is based on PostCSS plugins to purge and optimize the stylesheets. 

  • @fullhuman/postcss-purgecss
  • postcss-clean
  • postcss-import
  • postcss-loader
  • postcss-nested
  • cssnano and cssnano-preset-advanced

That's all by now, folks. To the moon!

 

Photo by Richard Masoner / Cyclelicious's photostream