# Instalação dos plugins oficiais no terminal do seu projeto
npm install -D @tailwindcss/typography @tailwindcss/forms

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

<!-- Artigo estilizado automaticamente com uma única classe container -->
<article class="prose prose-slate dark:prose-invert prose-emerald max-w-none">
    <h2>Introdução ao Desenvolvimento Moderno</h2>
    <p>Este parágrafo, as citações e os blocos de código recebem espaçamentos perfeitos sem nenhuma classe embutida!</p>
    <blockquote>A simplicidade é o grau máximo de sofisticação.</blockquote>
</article>

<!-- Checkbox customizado com cor verde e foco acessível -->
<input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 border-slate-700 bg-slate-900 size-4" />
 
<!-- Menu suspenso Select com bordas arredondadas e estilo nativo moderno -->
<select class="rounded-xl border-slate-800 bg-slate-950 text-white text-xs py-2 px-3 focus:border-emerald-500 focus:ring-emerald-500">
    <option>Plano Mensal (Básico)</option>
    <option>Plano Anual (Profissional)</option>
</select>

<div class="max-w-3xl mx-auto p-6 sm:p-10 bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl">
 
    <!-- ARTIGO FORMATADO AUTOMATICAMENTE VIA @tailwindcss/typography -->
    <article class="prose prose-slate dark:prose-invert prose-emerald max-w-none">
        <span class="text-xs font-bold uppercase tracking-wider text-emerald-400 bg-emerald-950/60 border border-emerald-800/60 px-3 py-1 rounded-full not-prose">
            Documentação Técnica
        </span>
        
        <h1 class="text-3xl font-black text-white mt-4">Arquitetura de Plugins no Tailwind CSS</h1>
        
        <p>
            Ao desacoplar utilitários especializados do núcleo da biblioteca, o Tailwind garante que seu bundle de produção permaneça ultraleve, entregando ferramentas avançadas apenas para as páginas que realmente demandam tipografia editorial rica.
        </p>
 
        <blockquote>
            "O HTML gerado por editores visuais ou CMS legados deixa de ser um pesadelo de estilização quando você delega as proporções tipográficas à classe prose."
        </blockquote>
    </article>
 
    <!-- SEÇÃO DE FEEDBACK COM CAMPOS ESTILIZADOS VIA @tailwindcss/forms -->
    <div class="mt-10 pt-8 border-t border-slate-800">
        <h3 class="text-sm font-bold text-white mb-4">Esta documentação foi útil para o seu projeto?</h3>
        
        <form class="space-y-4" onsubmit="event.preventDefault();">
            <div class="flex flex-col sm:flex-row gap-3">
                <input 
                    type="text" 
                    placeholder="Sugestões ou apontamentos técnicos..." 
                    class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none"
                />
                <button class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs rounded-xl shadow-lg transition-all active:scale-95 shrink-0">
                    Enviar Feedback
                </button>
            </div>
 
            <label class="flex items-center gap-2 cursor-pointer text-xs text-slate-400">
                <input type="checkbox" class="rounded text-emerald-600 focus:ring-emerald-500 border-slate-800 bg-slate-950 size-4" checked />
                <span>Desejo receber notificações sobre atualizações nesta aula da Web Academy.</span>
            </label>
        </form>
    </div>
 
</div>