A forma mais rápida de começar a usar o Tailwind CSS é através da CDN. Essa abordagem é ideal para testes, protótipos ou pequenos projetos, onde você não precisa de configuração ou build de produção.
Não é necessário instalar dependências nem configurar o tailwind.config.js. Basta incluir o link da CDN no <head> do seu HTML.
Quando usar a CDN
-
Protótipos rápidos
-
Testes isolados
-
Páginas estáticas simples
-
Estudos e aprendizado inicial
Se o seu projeto for crescer ou exigir otimização do CSS, o ideal é usar a versão com build via Node.js ou framework (abordada em outra seção).
Exemplo completo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo com Tailwind CDN</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded shadow-md max-w-md w-full">
<h1 class="text-2xl font-bold text-gray-800 mb-4">Olá, Tailwind!</h1>
<p class="text-gray-600">Este é um exemplo de uso do Tailwind CSS via CDN.</p>
</div>
</body>
</html>
Personalizando a CDN
É possível ativar configurações adicionais direto no script da CDN, como plugins ou temas customizados.
Exemplo ativando algumas configurações:
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: '#1e40af'
}
}
}
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
Vantagens da Instalação via CDN
-
Zero configuração
-
Ideal para testes e prototipagem
-
Funciona em qualquer projeto HTML
Limitações
-
Tamanho do CSS completo: A CDN carrega todas as classes, mesmo as não utilizadas.
-
Não é recomendada para produção: O build via CDN é mais pesado e não otimizado.
-
Sem purga de classes não utilizadas
-
Menor controle sobre customização avançada
Se você está dando os primeiros passos com Tailwind CSS, a CDN é uma excelente porta de entrada. Mas para projetos profissionais, considere usar a instalação via NPM com configuração personalizada.