Установите Tailwind CSS с помощью Angular

Настройка Tailwind CSS в проекте Angular.

Начните с создания нового проекта Angular, если у вас его еще нет. Наиболее распространенный подход — использовать Angular CLI.

Terminal

ng new my-project --style csscd my-project

Установите @tailwindcss/postcss и его зависимости через npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss --force

Создайте файл .postcssrc.json в корне вашего проекта и добавьте плагин @tailwindcss/postcss в вашу конфигурацию PostCSS.

.postcssrc.json

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Добавьте @import в ./src/styles.css, который импортирует Tailwind CSS.

styles.css

@import "tailwindcss";

Запустите процесс сборки с помощью ng serve.

Terminal

ng serve

Начните использовать классы утилиты Tailwind для стилизации вашего контента.

app.component.html

<h1 class="text-3xl font-bold underline">  Hello world!</h1>