Как я определяю, какой процесс использование является последовательным портом?

Синтаксис className предназначен для кода JSX, языка JavaScript, который для простоты выглядит как HTML, но он НЕ одинаков. Я не верю, что это приведет к ошибке в консоли, но не будет отображать стили. Для HTML вы должны использовать синтаксис class. Вы также не можете иметь . в имени класса, потому что это идентификатор класса. Вы обычно используете - или camelCase.

Я добавил красный фоновый класс, чтобы показать вам, как работает код.

.red {
    background-color: red;
}

.paddingRight-tiny {
    padding-right: 0.5em;
}

.paddingRight-small {
    padding-right: 1em;
}

.paddingRight-medium {
    padding-right: 1.5em;
}

.paddingLeft-tiny {
    padding-left: 0.5em;
}

.paddingLeft-small {
    padding-left: 1em;
}

.paddingLeft-medium {
    padding-left: 1.5em;
}

<div class="red paddingRight-small paddingLeft-tiny">
    <p>Some content goes here...</p>
</div>