Início / coding / Perguntas / 79568691
Accepted
user435421
Asked: 2025-04-11 19:08:56 +0800 CST

O TailwindCSS v4 não gera certos estilos ao usar prefixo

  • 772

Estou usando um prefixo para diferenciar meu estilo de classes de terceiros. Quando não estou usando o prefixo, isso funciona bem:

fixed h-[5px] bg-green top-0 left-0 z-1000

Ao usar o prefixo, os estilos superior e esquerdo não são gerados no arquivo CSS do Tailwind, enquanto os outros funcionam bem.

tw:fixed tw:h-[5px] tw:bg-green tw:top-0 tw:left-0 tw:z-1000

Atualização: Estou usando @tailwinde tailwind.configporque esta é a única maneira de me livrar de todos os estilos desnecessários do Tailwind. Há um elemento de terceiros usando a classe outline(e alguns nomes de classe mais básicos do Tailwind) e o Tailwind pensa que é o seu estilo, então o Tailwind gera outlineo estilo em seu arquivo CSS, o que bagunça a interface.

Tentei usar @import "tailwindcss" prefix(tw);e outras combinações, mas dessa forma todos os estilos inúteis ficam presentes no css gerado, o que bagunça tudo.

index.csscontente:

@config "../../tailwind.config.js";

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

/* ... */

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  mode: "jit",
  prefix: "tw",
  content: ["./src/**/*.{js,jsx,ts,tsx,css}"],
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}
tailwind-css

1 respostas

  1. Best Answer

    Importar

    A partir do TailwindCSS v4, a @tailwinddiretiva foi removida. Portanto, nenhuma dessas declarações é mais necessária. Em vez disso, você só precisa de uma única importação no topo do seu arquivo CSS:

    @import "tailwindcss";

@config "../../tailwind.config.js";

    Prefixo

    Se você quiser usar um prefixo, precisará incluir a importação novamente no topo do arquivo, assim:

    @import "tailwindcss" prefix(tw);

@config "../../tailwind.config.js";

    Entre minhas outras observações, gostaria de destacar que a mode: "jit"configuração no arquivo de configuração foi descontinuada desde o TailwindCSS v3, já que o modo JIT tem sido o padrão desde então.

    A partir da v4, se você estiver usando a configuração JavaScript legada, não precisará mais definir prefix: "tw"no arquivo de configuração; como mencionado, isso agora deve ser especificado durante a importação.

    Além disso, a partir do TailwindCSS v4, você não precisa definir a opção content; a v4 descobre automaticamente seus arquivos de origem (excluindo caminhos listados em .gitignore).

    Observação : certifique-se de que os arquivos listados em .gitignorenão sejam considerados pelo TailwindCSS ao compilar o CSS. É possível substituir a diretiva gitignore usando a @sourcediretiva (por exemplo, se você quiser excluir node_modules, mas precisar de alguns nomes de classe de um ou dois pacotes). Veja mais detalhes aqui: O TailwindCSS v4 não aplica estilos em pacotes/componentes .

    Então, se você ainda quiser usar o tailwind.config.js, isso é tudo que você precisa manter da configuração atual:

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      'green': '#4287f5'
    }
  }
}

    Se você não quiser substituir todas as cores originais do TailwindCSS (por exemplo, bg-red-500, etc.) e quiser apenas estendê-las com as suas próprias, use a extendpropriedade assim:

    /** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        'green': '#4287f5'
      }
    }
  }
}

    Configuração CSS-first (recomendada a partir da v4)

    A partir da v4, você não precisa mais de tailwind.config.js. Portanto, você pode deixá-lo de lado e usar a nova configuração CSS-first. Com base no seu arquivo de configuração atual, ficaria assim:

    @import "tailwindcss" prefix(tw);

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. tw:bg-green */
}

    Nota : Neste caso, não há tailwind.config.jsmais necessidade do!

    Claro, se você não precisa de um prefixo, então use-o assim:

    @import "tailwindcss";

@theme {
  --color-green: #4287f5; /* extend default colors with new green, what can use as e.g. bg-green */
}

    Mais mudanças significativas da v4

    Desde a versão 4, várias mudanças significativas foram introduzidas; vale a pena revisar todas elas.

    • 0

relate perguntas