O Tailwind

O bloco pode usar o Tailwind (versão 3.4.17) pelo CDN. Ponha no <head> o script escrito exatamente assim:

<script src="https://cdn.tailwindcss.com"></script>

Funciona: um bloco com o Tailwind, uma cor própria no tailwind.config e uma classe que o script põe depois.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: { extend: { colors: { marca: '#4f46e5' } } },
    };
  </script>
</head>
<body class="bg-slate-50 p-6">
  <button type="button" id="salvar" class="rounded bg-marca px-4 py-2 font-semibold text-white">Salvar</button>
  <p id="msg" class="mt-2"></p>
  <script>
    function mostrar(texto, erro) {
      const msg = document.getElementById('msg');
      msg.textContent = texto;
      msg.className = 'mt-2 ' + (erro ? 'text-red-600' : 'text-green-600');
    }
    document.getElementById('salvar').addEventListener('click', () => mostrar('Salvo.', false));
  </script>
</body>
</html>

O CSS que o construtor gera

Quando a Página salva, o construtor gera o CSS do Tailwind de cada bloco que usa o CDN, e o salvar seguinte o guarda junto do bloco. No "ver" e no app, o bloco abre com esse CSS no lugar do script do CDN: a Página não baixa o Tailwind (um script de 407 KB) nem gera o CSS a cada vez que abre. No canvas, o bloco continua com o CDN, e você vê uma classe nova na hora.

O CSS sai do texto do HTML, scripts incluídos: uma classe que só aparece depois (o vermelho de um erro, um modal) entra, se estiver escrita inteira em algum lugar do HTML.

A classe montada em pedaços não entra

Não funciona: o nome da classe montado em pedaços. No canvas parece certo (o CDN está vivo), mas no "ver" e no app o texto fica sem a cor.

msg.className = 'text-' + (erro ? 'red' : 'green') + '-600';

Funciona: cada nome inteiro, como o próprio Tailwind pede.

msg.className = erro ? 'text-red-600' : 'text-green-600';

Confira no "ver"

O "ver" usa o CSS gerado, como o app. Uma cor que aparece no canvas e some no "ver" é quase sempre uma classe em pedaços.

Quando o bloco fica com o CDN

Nos casos abaixo, o construtor não gera o CSS, e o bloco abre no app com o script do CDN, como no canvas: funciona, só fica mais lento para abrir.

• o script do CDN escrito de outro jeito (com outro atributo, com aspas simples), com outra versão, ou com plugins (?plugins=...);
• um HTML sem </head>;
• o tailwind.config fora de um <script> sem atributos, ou citado em outro lugar do HTML;
• um tailwind.config com plugins;
• um CSS que passa de 256 KB, ou que leva mais de 10 segundos para gerar;
• um bloco salvo antes de o construtor gerar o CSS, até a Página dele salvar de novo.

O <style type="text/tailwindcss"> entra no CSS gerado, como no CDN.