Tailwind CSS + Федерация модулей

Как использовать Tailwind CSS в микрофронтенде Angular

Tailwind CSS — это современная служебная библиотека CSS, используемая тысячами людей. Это позволяет использовать предопределенные классы css непосредственно внутри html, так что создание пользовательских классов css требуется редко. Но настроить его для микрофронтенда немного сложно. В любом случае, не волнуйтесь, в этой статье вы узнаете, как настроить рабочее пространство Nx с федерацией модулей и использовать Tailwind CSS в микрофронтенде.

Это оригинал ng-journal:

Попутный ветер в двух словах

Tailwind CSS предназначен для упрощения стилизации веб-приложений. Вместо того, чтобы придумывать имена классов CSS, что на самом деле является очень сложной задачей, вы можете использовать Tailwind CSS и добавить множество предопределенных служебных классов в атрибут class внутри ваших html-шаблонов. Хотя часто обсуждается, является ли Tailwind контрпродуктивным из-за того, что он загромождает HTML-шаблон, я на собственном опыте убедился, что работаю с ним намного быстрее. Самым большим преимуществом является то, что вам не нужно думать о хорошо говорящих именах классов css, и это огромная победа Tailwind.

Настройка объединения модулей

Если вы еще не очень хорошо знакомы с микрофронтендами и федерацией модулей, я бы порекомендовал прочитать эту статью, которую я написал некоторое время назад и которая предназначена для новичков в федерации модулей.
Начало работы с федерацией модулей
В этом article Я создал рабочее пространство Nx, содержащее два приложения (оболочка, удаленное) с автономным API. Следовательно, конфигурация маршрутизации предоставляется микроинтерфейсом вместо обычного ngModule. Но это только потому, что начиная с Angular 15 маршруты могут официально загружаться отложенно.

Добавление попутного ветра

Прежде всего, нам нужно установить Tailwind.
Выполнение следующей команды установит необходимые пакеты (tailwindcss, postcss, autoprefixer).

npm install tailwindcss

После этого мы можем настроить Tailwind для каждого приложения, выполнив следующую команду:

npx nx generate @nrwl/angular:setup-tailwind [remoteName]

Замените [remoteName] именем удаленного приложения

Этот генератор добавляет в ваш проект файл tailwind.config.js. Вы можете оставить все как есть, если у вас нет пользовательских конфигураций попутного ветра. Он также сгенерировал импорт попутного ветра в ваш глобальный файл таблицы стилей. Обычно это нормально, когда вы работаете с монолитом, но поскольку глобальная таблица стилей микрофронтенда не открыта, нам нужно найти решение, чтобы включить стили попутного ветра в открытую часть микрофронтенда.

@tailwind base;
@tailwind components;
@tailwind utilities;

styles.scss

Поэтому вы можете пока удалить эти импорты из глобальной таблицы стилей.

Шаблон прокси

Чтобы также совместно использовать стили попутного ветра во время объединения модулей, мы должны включить импорт попутного ветра в стили каждого компонента, который использует микроинтерфейс. Ну да, но есть лучший способ, когда мы можем просто импортировать попутный ветер один раз. Мы можем использовать ProxyComponent, который просто обертывает весь микроинтерфейс, который обычно отображается в конфигурации веб-пакета, и вместо этого предоставляет этот прокси. Теперь мы можем поместить импорт попутного ветра в стили этого прокси-компонента. Последнее, что нужно сделать, это установить для ViewEncapsulation прокси-компонента значение None. Это связано с тем, что обычно Angular по умолчанию инкапсулирует все стили, запутывая классы CSS. Это предотвращается, и поэтому стили этого компонента действуют как глобальная таблица стилей для всех дочерних компонентов и других компонентов без инкапсуляции представления. Так что имейте в виду, что вы должны поместить туда только импорт попутного ветра, чтобы быть в безопасности.

@tailwind base;
@tailwind components;
@tailwind utilities;

proxy.component.scss

<router-outlet></router-outlet>

proxy.component.html

import { Component, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'tailwind-microfrontends-proxy',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './proxy.component.html',
  styleUrls: ['./proxy.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ProxyComponent {}

proxy.component.ts

import { Route } from '@angular/router';

export const routes: Route[] = [
  {
    path: '',
    loadComponent: async () =>
      (await import('./proxy.component')).ProxyComponent,
    loadChildren: async () =>
      (await import('@tailwind-microfrontends/remote-lib')).routes,
  },
];

proxy.routes.ts

Результат

Репозиторий GitHub

Можно найти внизу страницы:

Спасибо 🤗

Спасибо, что прочитали эту статью! Надеюсь, вам понравилось и вы смогли узнать что-то новое и интересное.
Если у вас остались вопросы, не стесняйтесь обращаться ко мне в Twitter или LinkedIn для обсуждения.
Еще не подписались? Прокрутите вниз и больше не пропускайте новые статьи.

Присоединяйтесь к среде

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

• 👏 Хлопайте за историю и подписывайтесь на автора 👉
• 📰 Смотрите больше контента в публикации Level Up Coding
• 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу