TailwindCSS Brasil
Entrar
Docs

Integração do Tailwind CSS com Angular

O Tailwind CSS pode ser integrado ao Angular de forma estável e eficiente, tornando-se uma excelente alternativa às abordagens tradicionais baseadas em CSS global ou SCSS.

Apesar do Angular ser mais opinativo em relação à estrutura, o Tailwind se encaixa bem e acelera o desenvolvimento visual com seus utilitários altamente controláveis.

Criando um projeto Angular #

Se ainda não tiver um projeto, crie com a CLI oficial:

ng new meu-projeto
cd meu-projeto

Na criação, escolha CSS como tipo de estilização (ou SCSS se preferir – o processo é o mesmo).

Instalando Tailwind CSS #

Execute:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Isso criará o arquivo tailwind.config.js.

Configurando o Tailwind #

Edite tailwind.config.js e configure os caminhos:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Adicionando as diretivas do Tailwind #

Abra o arquivo src/styles.css (ou styles.scss caso tenha escolhido SCSS) e adicione:

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

Garanta que esse arquivo está listado no angular.json:

"styles": [
  "src/styles.css"
],

Usando Tailwind nos componentes Angular #

Depois da configuração, já é possível utilizar as classes utilitárias diretamente no HTML dos componentes:

<!-- app.component.html -->
<div class="p-6 max-w-md mx-auto bg-white rounded-xl shadow-md space-y-4">
  <h1 class="text-2xl font-bold text-gray-900">Bem-vindo ao Angular + Tailwind</h1>
  <p class="text-gray-600">Crie componentes estilizados com produtividade e controle total.</p>
</div>

Escopo dos estilos no Angular #

Por padrão, os estilos do Angular são encapsulados com ViewEncapsulation, mas o Tailwind funciona bem mesmo assim, pois aplica classes diretamente no HTML.

Evite usar ::ng-deep ou style scoped, pois eles não são necessários com Tailwind.

Componentes reutilizáveis com Tailwind #

A organização dos estilos pode ser feita por:

  • Classes diretas no HTML (recomendado)

  • Criação de classes personalizadas com @apply (via styles.css global)

/* styles.css */
.btn-primary {
  @apply bg-blue-600 text-white font-semibold px-4 py-2 rounded hover:bg-blue-700;
}

E no componente:

<button class="btn-primary">Salvar</button>

Produção e purga de classes #

O Angular CLI já define NODE_ENV=production ao rodar ng build --prod, então a limpeza de classes (purge) funciona automaticamente com base na config content.

Se você usa interpolação dinâmica para gerar classes (ex: [ngClass]), pode usar a opção safelist:

safelist: ['bg-red-500', /^text-/],

Extensões e ferramentas recomendadas #

  • Tailwind CSS IntelliSense no VSCode

  • Heroicons para ícones SVG compatíveis com Tailwind

  • Angular Schematics + Tailwind (para setups automatizados)

Considerações finais sobre essa integração #

O Angular, por ser mais corporativo, é muitas vezes combinado com abordagens baseadas em SCSS e Bootstrap. Porém, o Tailwind oferece uma alternativa moderna, mantendo a escalabilidade e produtividade — especialmente útil em SPAs complexas.

AnteriorOrganizando o HTMLPróximo Integração do Tailwind CSS com Next.js