Why and how we use Tailwind CSS

In this article we are going to give an overview of Tailwind CSS, highlight the most important features for us at 1xINTERNET, and explain why we choose it as our standard CSS framework. Tailwind CSS plays nicely with Drupal, Symfony, Twig, as well as with ReactJS and Web Components. We show how we achieved an optimal fit between the technologies and provide coding examples.

What is Tailwind CSS?

Tailwind is a CSS framework, a styling tool that boosts the development speed of the user interface and improves the consistency of the theming process.

Rather than providing designed components in a specific style like many other UI frameworks, Tailwind CSS provides low-level utility classes that can be customised and extended to match the client needs and the designer's creativity.

This approach gives flexibility and control while making it easier to maintain consistency.

Why Tailwind CSS?

Overall, Tailwind CSS is a flexible and efficient tool. The utility-first approach and facilities that it provides to build customisable and reusable design systems save us time and effort during the development process, while also helping to maintain a consistent and responsive design.

Utility First Approach

Tailwind is a utility-first CSS framework, which means that it is focused on making the styling process faster and more understandable.

As previously mentioned, rather than providing a set of predefined styles or components, Tailwind provides a set of utility classes, with meaningful names, that you can customise or extend and then use in order to build and personalise the elements that will compose the user interface.

This allows for greater customisation, designers can be more creative while establishing consistent design principles and developers can quickly apply the classes and fine tune details in order to match the design. 

The result is that the client gets a more personalised and representative look and feel in less time and the developer’s speed is boosted.

The main point of the utility classes is to be understandable and representative, instead of inventing naming conventions for the classes the result of applying them is included in the name.

Some examples are:

bg-white	// bg means background and “white” is the colour 
p-3 		// p means padding
m-3 		// m means margin and “3” the amount applied

Additionally, you can apply these classes conditionally, depending on the screen size, the theme of the user or what the cursor is doing (hovering, focusing …).

Some examples are:

dark:bg-black	// dark: will only apply when on dark mode
sm:p-3 		// sm: will only apply for mobile screensize
hover:text-red 	// hover: will only apply when hovering

With Tailwind we can use utility classes, which translate into making our styling method more legible, agile, consistent, creative, representative.

Define a design system

Tailwind config file provides a single point of truth for the foundation of our styling and theming process.

Do not feel constrained

Tailwind best practices promote using the config as the primary source of truth but that doesn’t mean that you cannot update it or use some custom values for a unique design that your favourite pixel perfectionist designer provided.

For example:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn-demo': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-demo-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
        },
        '.btn-demo-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
        },
      })
    })
  ]
}

Additionally, Tailwind presets let you export and reuse a whole configuration file of Tailwind. We can easily define a base theme or config that will include lots of features and maintain it separated from the custom configuration of any specific project that will use it.

With Tailwind we can reuse encapsulated style features using plugins or whole configurations using presets, which translates into reusability and modularity.

Reduce size and ensure performance

Tailwind provides different “ready for production” methods of building and minifying the styles.

For example we can purge all the classes that we have in our config (including the predefined Tailwind classes) if they are not being used in our templates.

We can also use the “jit” mode that stands for “just in time”. With this mode Tailwind will generate the CSS just when it’s needed.

These methods reduce the amount of CSS that our project uses which means that the website or application will be lighter and the load time will be faster.

Extensions and tools

Tailwind can be hard to use if you do not prepare your IDE and extensions accordingly.

Some of the problems are, for example, that the developer needs to remember the new utility classes, that the code can increase its size due to large “inline class styles”, or sorting the classes we use.

How do we use it in 1xINTERNET?

Our technical stack in the frontend consists of the following technologies:

• Drupal's theme layer using Twig
• ReactJS apps both as single page applications and as embedded webapps
• Web Components for creating reusable elements for arbitrary frontend technologies and design systems

In most of our frontends all technologies are present. A typical web based project would have a traditional frontend using Drupal's theming layer, but all interactive elements of the website would be built with ReactJS. For many projects this is an optimal setup. Read more about why pairing Drupal´s frontend technology with ReactJS is a good choice.

The shared elements in Twig and React are built using Web Components. Examples of shared elements are buttons, cards, tabs, lists, etc. To make reviewing of shared elements easy we build them as a design system.

We use Tailwind CSS for all technologies and share the configuration. As a result, a design change implemented in Tailwind CSS is immediately applied to all Web Components, all Twig templates, and all React webapps on a website.

For our developers this approach makes applying changes to a frontend a lot easier. They can easily understand the styling process for all technologies. The same is true for different projects. Developers can collaborate across projects, because we try to reuse our frontend technologies as much as possible.

1xDXP

Our main solution, 1xDXP, is a web platform that we use for all projects. It consists of a Drupal content management system with a ready-made theming layer using Web Components.

It comes with an integrated design system which is readily setup to work with Figma. Both the theming layer and the Web Components library are built with Tailwind CSS.