Вы можете найти множество руководств о том, как настроить Tailwind CSS с помощью Angular 6, 7. Половина из них использует ng-eject (он недоступен в Angular 6+), остальные построены на ng-tailwindcss, который является отличным инструментом, но я хотел, чтобы моя конфигурация была максимально простой и не устанавливала инструмент для иметь возможность использовать другой. Итак, приступим:
ОБНОВЛЕНИЕ: минимальная версия Angular для этой статьи - 8. Вы можете получить ошибки, если попытаетесь настроить его на Angular 7 или более ранних версиях. Я также создал образец проекта и опубликовал его на GitHub, вы можете найти его здесь: https://github.com/bajzat/tailwind-angular8.
Пользовательская конфигурация Webpack:
Tailwind CSS можно легко интегрировать в проекты на основе Webpack, но в случае проекта Angular CLI конфигурация webpack скрыта. Чтобы решить эту проблему, мы будем использовать пакет @ angular-builders / custom-webpack, который позволяет нам добавлять настраиваемую конфигурацию для интеграции попутной компиляции в процесс сборки. Вы можете найти действительно отличную статью об этом пакете на Netanel Basal.
Установите необходимые пакеты:
npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
Добавить импорт Tailwind в style.scss
@tailwind base; @tailwind components; @tailwind utilities;
Создайте файл конфигурации Tailwind
Выполните следующую команду в терминале / cmd:
npx tailwind init
Пусть начинается самое интересное, расширьте конфигурацию веб-пакета
Создайте файл webpack.config.js в корне и измените файл angular.json, чтобы использовать настраиваемый конструктор и наш новый файл конфигурации:
Измените только что созданный файл webpack.config.js
Последний шаг - добавление попутного ветра в цепочку сборки.
Добавьте кнопку в свой HTML-код и протестируйте приложение
npm start
… И наслаждайтесь результатом:
Репозиторий Github: https://github.com/bajzat/tailwind-angular8
