Это простое руководство по интеграции библиотеки 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, и вы поймете, почему он так хорошо принят сообществом.
Ваше здоровье!