Custom styles on Histoire UI

[victorlmneves]

Clear and concise description of the problem

SInce Histoire UI is based on Tailwind we don't have a way of overriding/controlling the appearance of the app.
Based on interaction with the tool, there are situations where we need to override for example the width of inputs or even the width of the 3 main divs.

Suggested solution

Each main div should contain a data attribute or a specific class/ID in order to be possible to extend/override the default style.
e.g:

<div class="histoire-left-side-nav"></div>
<div class="histoire-main"></div>
<div class="histoire-right-side-nav">
  <div class="histoire-right-side-nav__controls></div>
  <div class="histoire-right-side-nav__auto-props></div>
  <div class="histoire-right-side-nav__source></div>
</div>

For each Builtin control component, we should be able to pass a class in order to override their default styles
e.g:

<HstSelect
    v-model="colorIdentifier"
    :options="colorIdentifierOptions"
    :css="my-custom-select"
    title="colorIdentifier"
></HstSelect>

Alternative

No response

Additional context

Here's one example of problems with the UI #202

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.