Это простое руководство по интеграции библиотеки TailwindCSS в приложение Angular8.

Если вы не слышали о TailwindCSS, вы можете ознакомиться с ним здесь. Короче говоря, TailwindCSS — это будущая библиотека CSS, которая, я надеюсь, в ближайшем будущем заменит Bootstrap. Вы можете задаться вопросом, зачем вам использовать TailwindCSS? Ну, во-первых, он отлично подходит для адаптивных приложений, легко настраиваемых, с предварительно загруженными, я бы сказал, 90% классов CSS, которые вы обычно используете для создания веб-приложений и т. д.
Итак, давайте приступим :)

Прежде всего вам нужно создать простое приложение Angular8 и установить несколько дополнительных пакетов NPM:

ng new tailwindcss-demo
...IMPORTANT! select CSS when asked...

cd tailwindcss-demo
npm i -D tailwindcss postcss-import autoprefixer postcss-cli @fullhuman/postcss-purgecss

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

npx tailwind init

Это создаст новый файл с именем tailwind.config.js.

Затем создайте новый файл, также в корне приложения, с именем postcss.config.js и добавьте в него этот код:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/index.html',
      ],
      defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    }),
  ],
};

Что этот код эффективно делает, так это удаляет неиспользуемый CSS из вашего приложения, оставляя только используемые классы TailwindCSS.

После этого создайте также один новый файл в ./src/tailwind-build.css и поместите в него этот код:

/* ./src/tailwind.css */

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

Откройте файл angular.json и отредактируйте его следующим образом (есть 2 вхождения, которые необходимо отредактировать: одно при сборке, другое при тестовом ключе):

// this is under build key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],
// this is under test key
    "styles": [
        "src/styles.css",
        "src/styles-tailwind.css" // add only this line
    ],

В файле package.json добавьте в раздел scripts следующее:

...
"scripts": {
...
  "tailwind-build": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css",
  "tailwind-watch": "postcss ./src/tailwind-build.css  -o ./src/styles-tailwind.css --watch",
...
},
...

Бегать:

npm run tailwind-build

и обратите внимание, что новый файл был создан в папке ./src/styles-tailwind.css. Этот файл является окончательным результатом процесса сборки попутного ветра и содержит ВСЕ элементы CSS из TailwindCSS. Если вы немного исследуете, вы заметите, что этот файл имеет размер ~ 787 КБ:

+--------------------------------------------------------------+
| Size         | 787.36 KiB                                    |
|--------------------------------------------------------------|
| Gzipped      | 85.43 KiB                                     |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 11:51:05                  |
+--------------------------------------------------------------+

что немало кстати. Это будет уменьшено по мере нашего продвижения, не волнуйтесь :). И помните, мы еще даже нигде не использовали TailwindCSS в нашем проекте, так что давайте начнем его использовать :)

В нашем app.component.html вы можете удалить все или добавить следующую строку в конец файла (это только для целей тестирования и проверки правильности интеграции TailswindCSS):

<div class="text-4xl text-center text-blue-500 bg-red-200 mt-8">TailwindCSS Example Works</div>

Теперь запустите:

npm start

и вы должны увидеть текст «TailwindCSS Example Works», стилизованный с использованием TailwindCSS.

Также вы можете запустить:

npm run tailwind-watch

из другого окна терминала, и всякий раз, когда вы изменяете файл ./src/tailwind-build.css, процесс сборки файла будет запускаться автоматически, а новый ./src/styles-tailwind.css > файл будет создан.

Как насчет этого размера ~ 787 КБ?

Если вы внимательно посмотрите на файл postcss.config.js, вы заметите, что когда env находится в рабочей среде, purgecss удалит весь неиспользуемый код css из всех файлов .html, и, следовательно, размер ./src/styles-tailwind.css будет значительно уменьшен. Если вы запускаете свой код в рабочей среде:

NODE_ENV=production npm run tailwind-build

вы заметите, что ./src/styles-tailwind.css теперь составляет ~ 9 КБ, что хорошо:

+--------------------------------------------------------------+
| Size         | 8.99 KiB                                      |
|--------------------------------------------------------------|
| Gzipped      | 2.86 KiB                                      |
|--------------------------------------------------------------|
| Mime type    | text/css                                      |
|--------------------------------------------------------------|
| Created      | December 11th 2019, 11:49:28                  |
|--------------------------------------------------------------|
| Changed      | December 11th 2019, 13:06:37                  |
+--------------------------------------------------------------+

Поэтому убедитесь, что вы используете этот подход при развертывании в рабочей среде.

И это делает конец этой статьи. Надеюсь, он был вам полезен.
Попробуйте TailwindCSS, и вы поймете, почему он так хорошо принят сообществом.

Ваше здоровье!