Início / coding / Perguntas / 79560191
Accepted
Harry Northover
Asked: 2025-04-07 22:50:02 +0800 CST

Exibindo caixas de cores ao lado dos nomes das classes TailwindCSS indicando a cor, em qualquer lugar, como nos atributos class ou className

  • 772

É possível exibir caixas de cores antes de qualquer nome de classe TailwindCSS relacionado a cores, independentemente de onde eu escreva o nome da classe TailwindCSS?

Notei que isso funciona perfeitamente em arquivos CSS ou dentro do HTML classou classNameatributos (por exemplo, border-error-400na segunda foto).

Eu imagino que isso deva funcionar em todo o código, mas fiquei decepcionado ao descobrir que, como mostrado na captura de tela anexa, a caixa indicadora de cor não aparece quando uma classe de cor TailwindCSS é escrita como o valor de um objeto JS.

Não funciona em lugar nenhum Trabalhando em className="..."atributo
não está funcionando aqui trabalhando aqui
visual-studio-code

2 respostas

  1. Best Answer

    TLDR : Embora as primeiras soluções respondam especificamente ao exemplo da pergunta, sugiro que você considere uma abordagem muito mais consistente: criar uma função para a qual você sempre passe apenas classes TailwindCSS. Em seguida, informe ao IntelliSense que a função chamada xy aceitará apenas classes TailwindCSS, portanto, ele deve tratá-la adequadamente. Veja mais: Solução nº 3 .

    Bem, verifiquei minha sugestão e sim; o TailwindCSS IntelliSense aplica totalmente todos os seus recursos com base nos padrões regex corretos.

    Nota : Um pré-requisito para a validação adequada da minha resposta é a instalação do TailwindCSS IntelliSense.


    Solução nº 1 para objetos JavaScript simples

    Isso lhe dá a resposta correta, embora eu não ache que seja a melhor maneira. Com regex, podemos declarar a sintaxe de objetos JS para que ele tente procurar nomes de classes TailwindCSS em todas as strings colocadas como valores e sugerir nomes de classes TailwindCSS como dicas.

    TailwindCSS IntelliSense com esta configuração:

    {
  "tailwindCSS.experimental.classRegex": [
    ":\\s*?[\"'`]([^\"'`]*).*?,",
  ],
}

    Nota : Para abrir as configurações, pressione CtrlPe digite Preferences: Open User Settings (JSON).

    Importante : A desvantagem é que será válido para todos os objetos. Acho que isso pode ser um desperdício de energia e uma complicação desnecessária do processo.

    exemplo


    Solução nº 2 para variáveis ​​JavaScript simples

    Semelhantemente aos objetos, regex também pode ser escrito para variáveis.

    TailwindCSS IntelliSense com esta configuração:

    {
  "tailwindCSS.experimental.classRegex": [
    "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]",
  ],
}

    Nota : Para abrir as configurações, pressione CtrlPe digite Preferences: Open User Settings (JSON).

    Importante : A desvantagem recorrente, mais uma vez, é que isso será válido para todas as strings. Acho que isso pode ser um desperdício de energia e uma complicação desnecessária do processo.

    exemplo


    Solução #3 com uma função especial (recomendado)

    A vantagem da função é que sempre que você quiser usar uma classe TailwindCSS, basta chamá-la e ela funcionará imediatamente, enquanto a solução anterior só estará disponível em objetos JS.

    Em vez de depender de expressões regulares, recomendo criar uma função "falsa" que aceite uma string como parâmetro e simplesmente retorne esse parâmetro como resultado. Dessa forma, você pode informar explicitamente ao TailwindCSS IntelliSense que os parâmetros passados ​​para essa função definitivamente contêm nomes de classes do TailwindCSS, para que ela funcione corretamente e consistentemente em qualquer lugar posteriormente.

    function tw (input: TemplateStringsArray | string, ...interpolations: any[]): string {
  if (typeof input === "string") {
    return input;
  }

  let result = input[0];
  for (let i = 0; i < interpolations.length; i++) {
    result += interpolations[i] + input[i + 1];
  }
  return result;
}

    E os parâmetros da twfunção serão manipulados corretamente pelo TailwindCSS IntelliSense com esta configuração:

    {
  "tailwindCSS.classFunctions": [
    "tw",
  ],
}

    Nota : Para abrir as configurações, pressione CtrlPe digite Preferences: Open User Settings (JSON).

    Observação : A twfunção não precisa ser muito complicada. Eu simplesmente permiti que ela aceitasse os três tipos básicos de entradas de string. Todos os três estilos de invocação retornam uma única string concatenada. Por exemplo, em example_4, o resultado seria "bg-red-500 text-green-400".

    exemplo

    • 1

  2. As caixas de cores são exibidas apenas em className. É claro que você pode fazer isso instalando a extensão "Color Highlight" e convertendo as cores para HEX. Por exemplo, em vez de escrever "bg-red-600", escreva "#e7000b".

    • -1

relate perguntas