Question 305877 in CSS Question posted in
Some basic documentation can be found here.

Tailwind CSS v3.1 Arbitrary Variants Not Applying to Custom Class (bq-panel) – Unable to Set Width

I’m currently facing challenges with Tailwind CSS v3.1 arbitrary variants not being applied as expected to a custom Angular dropdown component named app-drop-down. The primary concern revolves around setting a fixed width of 160px for the dropdown panel (bq-panel).

Note that bq-panel is a part of a third-party library used under the hood to display the dropdown panel.

I have tried different variations of the format, such as [&_bq-panel]:width-40, [&_#bq-panel]:width-40, and several others. Strangely, when I tested the arbitrary variants on other elements, such as paragraph, it worked as expected.

I’m thinking the problem might be because the 'bq-panel' is utilized internally by the library and isn’t part of the actual code. This could be why the styling isn’t applying correctly to the panel, unlike paragraph, which is directly in the code."

app.component.html

<app-drop-down [options]="(options$ | async) ?? []" [dropdownName]="currentEmployee.name" (itemSelect)="onLogout()" class="[&_bq-panel]:w-40"> <!-- ... (other dropdown content) ... --> </app-drop-down>

drop-down.component.html

    <div class="mt-xxl3 place-items-center gap-m">
  <bq-dropdown
    distance="4"
    placement="bottom-end"
    open=""
    panel-height=""
    skidding="0"
    strategy="fixed"
    [class]="dropdownWidth + ' hydrated'"
    sameWidth="false"
  >
    <bq-button
      appearance="text"
      block="true"
      [size]="buttonSize"
      type="button"
      variant="standard"
      slot="trigger"
      justify-content="center"
      class="hydrated"
    >
      <ng-container *ngIf="iconTrigger; else textContent">
        <ng-content select="[icon]"></ng-content>
      </ng-container>

      <ng-template #textContent>
        <div class="flex w-40 justify-evenly">
          <div class="flex">
            <ng-content select="[image]"></ng-content>
          </div>
          <span *ngIf="dropdownName" class="flex items-center"
            >{{ dropdownName }}
            <ng-content select="[caret]"></ng-content>
          </span>
        </div>
      </ng-template>
    </bq-button>

    <div>
      <bq-option-list aria-label="Options" class="hydrated" role="listbox">
        <ng-container *ngFor="let option of options">
          <bq-option [value]="option" class="hydrated" (click)="itemSelected()">
            <p>{{ option }}</p>
          </bq-option>
        </ng-container>
      </bq-option-list>
    </div>
  </bq-dropdown>
</div>

Here is how the element looks like the DOM:

<div class="bq-panel" aria-hidden="false" part="panel" style="top: 0px; left: 0px; transform: translate(887px, 68px); visibility: visible;"><slot></slot></div>
Tags:

2

Answers


  1. 0

    It seems like you made typos in both attempts at constructing the correct class name. The target element seems to have a class of bq-panel, so the CSS selector would be .bq-panel, not bq-panel or #bq-panel.

    Furthermore, in Tailwind, the CSS class names that apply the width CSS property are prefixed by w-, not width-. So to apply width: 10rem (equivalent to 160px at 16px root font size), the class name would be w-40.

    Thus, to put this all together, the class name you may be after is [&_.bq-panel]:w-40.

    Login or Signup to reply.
  2. 0

    In your main.css file (or whatever you have called it), probably where you have imported @tailwind base;, etc. imports, you may want to try this

    .bq-panel {
  @apply w-40;
}

    For more details, you can refer https://tailwindcss.com/docs/functions-and-directives#apply.

    This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search