Codeblox Blog
Tailwindcss com workspace Angular
O Angular, a partir da versão 11.2, passou a suportar o Tailwind de forma facilitada, mas recentemente passei por dificuldades para ativar seu novo modo ‘jit’ que ainda está em preview.
Este modo além de possibilitar builds mais rápidas, também permite o uso de features especiais que você pode conferir aqui.
Vou relatar aqui pelo que passei.
Instalei o Tailwind utilizando o schematic @ngeat/tailwind:
ng add @ngneat/tailwind
Ele facilita bastante as coisas pois funciona como uma espécie de passo a passo para instalar o Tailwind.
Ele vai instalar o tailwindcss, alterando assim seu package.json, vai mexer no styles.scss(ou css) da sua aplicação e também vai criar o arquivo de configuração tailwind.config.js conforme as preferências selecionadas no passo a passo.
Esse schematics criou um arquivo de configuração na raiz do meu worskpace Angular com o seguinte conteúdo:
const { guessProductionMode } = require("@ngneat/tailwind");
process.env.TAILWIND_MODE = guessProductionMode() ? 'build' : 'watch';
module.exports = {
prefix: '',
mode: 'jit',
purge: {
content: [
'./src/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
Ele também alterou o styles.scss apenas de um dos projetos do worskpace. Basicamente ele adiciona as linhas abaixo, basta copiá-las para os outros projetos:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
No meu caso, estou apenas interessado nos utilitários, então mantive apenas isso:
@import 'tailwindcss/utilities';
Tudo ajustado, mexi em alguns arquivos para utilizar classes do tailwindcss e rodei o meu projeto com ng serve nome-do-projeto, mas os estilos não eram aplicados.
Fiquei patinando e batendo a cabeça e caçando respostas na internet. Cheguei a achar que era algo sobre setar o NODE_ENV=development mas nada a ver.
Até que veio uma luz e era algo bem mais besta. O @ngneat/tailwind não interpreta se o projeto está em um workspace e configura o purge a partir da pasta ./src/.
Em um worskpace Angular os projetos vão estar a partir da pasta ./projects/. Bastou então ajustar o purge da seguinte forma para que tudo funcionasse corretamente:
purge: {
content: [
'./projects/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
Porém percebi que classes css utilizadas apenas em um dos projetos acabava ficando disponível no bundle do outro projeto.
Para evitar isso foi necessário criar um arquivo de configuiração na pasta de cada projeto e ajustar corretamente a configuração de cada um.
projects/projeto1/tailwind.config.js:
purge: {
content: [
'./projects/projeto1/**/*.{html,ts,css,scss,sass,less,styl}',
'./projects/pasta-compartilhada/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
projects/projeto2/tailwind.config.js:
purge: {
content: [
'./projects/projeto2/**/*.{html,ts,css,scss,sass,less,styl}',
'./projects/pasta-compartilhada/**/*.{html,ts,css,scss,sass,less,styl}',
]
},
No exemplo acima coloquei a pasta-compartilhada para ilustrar casos onde exista elementos compartilhados entre vários projetos de um workspace.
