In this frontend pill we are going to create a stepper atomic component in pure CSS. We needed it in our design system to complete the onboard wizard at ssonext.com (WIP).

This is the desired result:

Before writing any code, let’s imagine the best way for the developer to consume this component.

Since the component is in pure CSS, the developer expects to have some classes to create the component.

There are two conditions that we must respect to maximize developer experience:

1. Minimize the number of tags necessary to create the stepper;
2. Use only CSS - no JavaScript at all.

When making a stepper, the only thing that will be present is the stepper title:

<div>Step 1: do something</div>
<div>Step 2: almost done</div>
<div>Step 3: done!</div>

Then we have to decide how to indicate the state of the step: “to do”? “active”? “done”?

Each state could be a class:

<div class="todo">Step 1: do something</div>
<div class="active">Step 2: almost done</div>
<div class="done">Step 3: done!</div>

The problem with the code above is that active is a very common CSS class, so it is better to be more specific and use classes with detailed names.

So we end up with the following classes:

<div class=’bo-step-done’>
 STEP 1
 </div> <div class=’bo-step-active’>
 STEP 2
 </div> <div class=’bo-step-todo’>
 STEP 3
 </div>

Simple and compact. Now it’s time to translate the code above to this CSS atomic component:

How to implement a stepper component in SCSS + TailwindCSS

To implement our stepper atomic component, remember that we want to use pure CSS: so no JavaScript at all.

The developer should also be able to implement the stepper using only one HTML tag (Developer experience: keep the number of tags to a minimum possible).

Drawing the step circle

To draw the circle, we use the following Tailwind classes:

@apply h-6 w-6 rounded-full border-2 border-bop bg-bop ;

rounded-full combined with bg-bop will make a circle shape using the main color (the -bop color... see the note below).

Why a border-2? Because we will customize it later for the specific state.