Search by Algolia
How personalization boosts customer engagement
e-commerce

How personalization boosts customer engagement

You land on your favorite retailer’s website, where everything seems to be attractively arranged just for you. Your favorite ...

Jon Silvers

Director, Digital Marketing

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

After years of development, we decided to standardize the user interface of one of our most important products – our multi-application dashboard. We did this for our customers and internal users (ease of use) as well as our product team (easier design process, decision-making, and coding). We also needed to align more consistently with our company’s branding. 

For this, we built an internal design system, called Satellite. In developing Satellite, we looked at different CSS solutions for the UI library, all with their pros and cons: Saas, css modules, css-in-js.

After considering frameworks similar to Bootstrap, we settled on the CSS framework Tailwind CSS. Why?

  • Pure CSS (no JS runtime) – good for performance
  • Tends to generate smaller CSS stylesheet files (after purging) – also good for performance
  • No switching between a CSS file and your javascript code while developing new components
  • No time wasted trying to find good names for utility classes
  • Helps promote UI consistency
  • Allows you to define a collection of spacings and colors that map well to design tokens (a “Restricted Palette”)

However… there was a downside to Tailwind: the readability of complex components. The soup of Tailwind can be hard to digest when you’re not used to its classnames. In our case, it was made worse because we had to use a prefixed versions of the CSS classes (stl-) to avoid conflicts with our legacy CSS, adding even more noise and length to our classname strings. 

This article shows how we mitigated the readability problem. For starters, we used several web development techniques, such as tagged literals and interpolation, to shorten the length of our strings. Then we simplified the usage of the classnames with the linter tool ESLint, providing a better DX with two tools:

  • An ESLint plugin, because there was no official ESLint-Tailwind plugin at the time. 
  • A Visual Studio Code extension to simplify the usage by providing intellisense of Tailwind’s many classes. The official ESLint VS extension didn’t work for us because it expected a configuration file (tailwind.config.js) to be present in the project, while we had used a prebuilt version at the time. Among other tasks, we needed VS to work with our config file.

That’s more or less the background. Now let’s get into the implementation.

Tailwind – classnames are good, but can get complex

Classnames are good

A utility-first CSS framework like Tailwind comes with a large set of pre-existing utility classes that you can use directly in your HTML and JavaScript. These classes enable consistency across the code. And they are entirely configurable: with the same classnames, we could easily brand our application with variants. Therefore, using Tailwind CSS classnames enabled us to create a consistent set of colors, spacing, fonts – essentially, all things CSS – and rolled out an easy-to-implement design system. 

But Tailwind classes can get complex

We wanted to simplify our usage of Tailwind’s classes. For this, we used techniques such as tagged template literals, interpolation, and conditions.

We started with a long string of CSS classes like the following:

const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';

But we soon realized that this was not easy to read. Additionally, it contained unnecessary noise, such as the prefix stl-, used to avoid clashes with other classes. So we enlisted the help of tagged template literals to remove the prefix from the string. We created an stl tag:

const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';

Finally, we wanted more readability. So we added:

  • Separate lines for more readability and grouping of common elements
  • Interpolation with inline tagged template literals 
  • Conditions for more powerful and adaptive styling

The result is an elegant piece of (CSS) code:

const className = stl '
inline-flex items-center justify-center
h-10 w-10
${round && 'rounded-full'}
${iscool ? 'bg-blue-100' : 'bq-red-100'}
;

ESLint – effortlessly correcting human error

Elegance is one thing. Correct is another. It’s easy to misspell classes, especially when there are many classes to initially learn about in Tailwind. 

Here’s an example of what can go wrong: 

cost className = stl 'felx space-between text-gray-200’;

Can you spot the errors?

  • Switching letters (felx for flex)
  • Incomplete or non-existent classes (space-between)
  • American vs British spelling (gray)

ESLint to the rescue – creating an ESLint plugin

We needed to verify that the classes that people used were the correct ones. So we used the linter tool ESLint to parse the code, analyze it, and report errors. We created an ESLint plugin for code quality and to report errors on class names that didn’t exist.

eslint errors

Here’s the central ESLint code that does the validation:

eslint ast

ESLint uses an abstract syntax tree (AST) that gives access to individual lines of code. The AST essentially converts the strings of the code into nodes, which you can parse as collections and elements.

Here’s the breakdown of how ESLint parses the code. The whole expression is a node of type VariableDeclataion:

variable declaration

We want to parse the expression on the right side, the TaggedTemplateExpression. As you can see, there’s a callback that handles this kind of expression:

tagged template expression 

In the TaggedTemplateExpression callback, we collect all the strings in that template. For example:

  • The TemplateElement 

template element

  • The Literals

literals

Once the collecting is done, there’s another registered callback that loops through the collected class names and confirms whether they exist. It does this with the collection, validClassNames:  

tagged template expression eslint callback

That’s it. We knew right away that creating this validation plugin was the right thing to do, because we actually found a few misspellings in our system, as well as in the existing dashboard codebase!

Proposing suggestions with our ESLint VisualStudio extension

The last tool we created was an extension in Visual Studio Code. Using the same logic as in our plugin, ESLint suggests typescript classes as a developer types. This intellisense keeps the developers from guessing or having to go to the Tailwind website to search for and find the correct classes. 

As you can see in the GIF, it not only proposes class names, it also displays the colors or useful icons for each suggestion.

With Tailwind CSS and ESLint, we’ve been able to enforce our standards (accessible internally on Github) by improving the DX in implementing them. 

About the author
Peter Villani

Sr. Tech & Business Writer

linkedinmediumtwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Building a Store Locator in React using Algolia, Mapbox, and Twilio - Part 1
engineering

Clément Sauvage

Software Engineer, Freelance

Customizing Algolia React components with Tailwind classes
engineering

Chuck Meyer

Sr. Developer Relations Engineer

Goodbye JavaScript: Introducing our CSS API Client
product

Tim Carry