Как настроить TailwindCSS в Angular 11.2.0 или ниже

Question

Как вы знаете, Tailwind - очень популярное решение PostCSS. Я хочу добавить TailwindCSS в свое приложение Angular с версией 11.2.0 или более ранними версиями. Как я могу это сделать?

Я решил опубликовать и ответить на свой вопрос, потому что это очень популярный вопрос, который я недавно видел в сообществе Angular.

Answer 1

Настройте TailwindCSS в Angular 11.2.0

1. Установить с помощью npm install -D tailwindcss

2. Установите плагины TailwindCSS (необязательно):

• npm i @tailwindcss/typography

• npm i @tailwindcss/forms

3. Создайте файл конфигурации TailwindCSS в рабочей области или корне проекта. Назовите этот файл конфигурации tailwind.config.js

Должно получиться так:

      module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

4. В вашем файле styles.scss добавьте следующий импорт TailwindCSS

      @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

если вы используете CSS, а не SCSS, ваш файл должен выглядеть так:

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

Убедитесь, что TailwindCSS в Angular работает

Перейдите к любому из ваших компонентов и напишите следующее:

      <button
  class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>

Теперь беги ng serve, вы должны увидеть следующую кнопку

Как очистить TailwindCSS в продакшене

Если мы не очистим, наш CSS может быть очень тяжелым из-за всех классов CSS, которые TailwindCSS добавляет для вас. Если вы выполните чистку, все неиспользуемые классы будут удалены.

Я решил выполнить очистку в Angular 11.2.0 следующими способами:

A) Это мой предпочтительный способ. Добавьте это в свой СКРИПТ здания NODE_ENV=production ng build --prod и ваш файл tailwind.config.js должен выглядеть так.

      purge: {
      enabled: process.env.NODE_ENV === 'production',
      content: [
        './src/**/*.{html,ts}',
      ]
    },

Б) В вашем tailwind.config.js file вы можете установить enabled собственность внутри purge собственность true. Имейте в виду, что при этом будет постоянно выполняться чистка.

      ....
prefix: '',
    purge: {
      enabled: true,
      content: [
        './src/**/*.{html,ts}',
      ]
    },
....

Тогда ты можешь бежать ng build --prod и вы увидите свой пакет, поскольку он становится меньше.

Перед продувкой

После продувки

Чтобы узнать больше об Angular (11.2.0 или более ранняя версия) с TailwindCSS, посмотрите мою статью

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l