在 Angular 应用程序中使用断点时，动态类不适用于 Tailwind CSS 网格布局

Question

我在我的 Angular 应用程序中使用 Tailwind CSS。在我的网格布局中，我尝试动态添加

col-span-

的值。如果我使用动态值而不使用任何媒体查询断点（如 lg、md 等），它们就可以正常工作。但是当我尝试用断点添加这些值时，它们似乎不适用。 这是我的 Tailwind css 网格：

<ng-container *ngFor="let app of (dashboardApps | async); let index = index; let firstItem = first">
        <div class="flex justify-between py-2 px-2 bg-[#eae4d8] rounded-md col-span-12 relative">
          <p class="mt-2 text-lg font-semibold">{{app.name}}</p>
          <a *ngIf="userRoleCheck == true" [routerLink]="['/modules/add-module', app._id]" [queryParams]="{parentID: app?._id || ''}" class="px-4 py-2 rounded-md bg-[#F15B41] text-white no-underline hover:text-white text-base hover:bg-opacity-80 hover:transition-colors">+ Add new app</a>
        </div>
        <ng-container *ngIf="!app.submodules || app.subsubmodules?.length == 0; else showApps">
          <div class="h-5"></div>
        </ng-container>
        <ng-template #showApps>
          <ng-container *ngFor="let appdata of app?.submodules; let i = index; let firstModule = first; let last = last;">
            <ng-container *ngIf="appdata?.status !== 3">
              <grid-top-app
                (deleteModule)="showDialog($event, template)"
                [appData]="appdata"
                class="col-span-full lg:col-span-{{ appdata?.layout?.colWidth || '4' }}"
              ></grid-top-app>
            </ng-container>
            <ng-container *ngIf="appdata?.status == 3">
             <ng-container *ngIf="currentUser?.id == appdata?.createdBy">
              <grid-top-app
                (deleteModule)="showDialog($event, template)"
                [appData]="appdata"
                class="col-span-full lg:col-span-{{ appdata?.layout?.colWidth || '4' }}"
              ></grid-top-app>
             </ng-container>
            </ng-container>
          </ng-container>
        </ng-template>
      </ng-container>

如您所见，这就是我应用动态样式的地方

class="col-span-full lg:col-span-{{ appdata?.layout?.colWidth || '4' }}"

如果我不使用断点，它们可以正常工作，但否则它们不适用。如果我检查我的 DOM，我可以清楚地看到动态类存在于选择器/html 标签上（下面的屏幕截图）

但在视图中我看到

col-span-full

正在应用（下面的屏幕截图）

我希望这些样式适用于所有断点（lg、md、xl 等）。任何帮助将不胜感激。预先感谢！

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

考虑通过

grid-columns

属性应用

style

。