Switching to Tailwind CSS, a utility-first CSS framework

A CSS framework will give you lots of default CSS and JavaScript functionality out of the box, including a huge list of components, such as:

• Alerts
• Inputs and buttons
• Modals
• Navigation bars
• Pagination
• Tabs and pills
• …etc.

Once setup, you can add your own bespoke CSS to override the defaults and make your website match your design and branding. Alternatively, you can take the complex approach of replacing the defaults with custom values by precompiling the source SASS yourself. Only then can you start to build bespoke components on top of that framework.

The problem with CSS frameworks

There are several problems with CSS frameworks that could make you think twice about using one. Below are a few reasons why a framework could hold you back, reduce your productivity, and make CSS maintenance harder for you.

Opinionated

Frameworks are opinionated, generating classes even though you have not asked for those classes. Frameworks also define what default styles are applied to a class and dictate the HTML markup needed to display correctly.

Bloated code

Overriding default styles adds extra lines of code, which increases the file size. In addition, you are not likely to use every component shipped with a framework. It is critical to use a tool to remove unused styles, such as PurgeCSS. As the project ages, the CSS file size will continue to grow as you add new template designs and custom components.

Design similarities

Frameworks do a good job of giving you lots of components that are great looking, consistent, and accessible. So why would you want to change the default styles? If you only make slight changes, or no changes at all, your website could start to look like other websites using the same framework.

Long-term productivity

After several months of not working on a website, it can be difficult to jump back into a project and start developing straight away. It is time consuming trying to remember the website setup and framework used. You can only start to make changes once you are up to speed.

Understanding syntax

Unless you are familiar with a framework, you will need to learn the syntax for the CSS and HTML. Classes are likely to be named semantically (describing its use or role). In Bootstrap, a nav-bar class is used for an element containing a navigation menu, which makes sense. To correctly implement a nav-bar, you must know all the classes used and the markup structure. Syntax is not always intuitive, and you will need to refer to documentation.

Misuse of CSS classes

Once you understand the class syntax, it is important to use the framework as intended. A btn class describes that it will add button-like styles to a HTML element. The class should be added to a <a> or <button> element, but there are no restrictions to stop a developer from adding the class to a <span>. Reusing the class for consistent styling seems like a good idea, but the semantic, descriptive naming has suddenly lost its meaning.

Semantic CSS naming is hard

Whether you are creating bespoke CSS or a framework component, naming is hard. Semantic class names, descriptive of its role or use, are much harder to name as websites grow, with lots of components starting to share similar design ideas and characteristics… assuming the name you come up with hasn’t already been used.

Loss of knowledge

It is possible, especially for inexperienced CSS developers, to lose knowledge of the underlying CSS used by a framework. Multiple styles are abstracted behind descriptive class names. Unless you are overriding default styles, or inspecting the generated CSS, there is no need to see what border or padding values are being set for a component.

Risk when making changes

The biggest problem with bespoke CSS and frameworks is the risk when making changes. You must be aware of what will be affected when you make a change. If you add, edit, or delete styles, it can have adverse effects on another template. Content management systems (CMS) and JavaScript plugins might apply classes dynamically, making it harder to search for what classes are being used.

Utility-first CSS

Alternatively, you can use an unopinionated approach, such as utility-first CSS, which removes the problems caused by using bespoke CSS or frameworks.

Utility-first CSS frameworks give a constrained set of primitive classes, called utilities, that are not named semantically and usually apply a single style, such as margin-bottom. Using a utility-first CSS framework, such as Tailwind CSS, lets you customise and access pre-existing utility classes and apply them directly to your HTML.

In fact, most CSS frameworks already have some utility classes in their systems. Bootstrap has a large list of utility classes to let you add styles alongside components, including:

• Borders: weight, colour, and radius
• Colours: text, backgrounds, and gradients
• Display: inline, block, flex, and hidden
• Position: static, relative, absolute, fixed, and sticky
• Spacing: margin and padding
• Text: alignment, wrapping, font weight, decoration, and transform
• …etc.

If you have used Bootstrap, you may have used its margin utility classes, such as mb-{x}: