Início / coding / Perguntas / 79542050
Accepted
Christian Munk-Nissen
Asked: 2025-03-29 01:21:51 +0800 CST

TailwindCSS v4 não aplica estilos em pacotes/componentes

  • 772

Por que meu tailwind não funciona com meus componentes em meus packages/components/srcarquivos?

Funciona no meu apps/my-app, mas quando importo meu componente de pacotes, ele não aplica o TailwindCSS no meu componente.

Eu tenho meu app.cssem packages/styles. O que devo fazer?

tailwind-css

1 respostas

  1. Best Answer

    O TailwindCSS v4 chegou com detecção automática de fonte. Esse recurso escaneia todos os arquivos e procura por nomes de classes usados ​​para gerar o CSS compilado. No entanto, ele ignora os caminhos listados no .gitignorearquivo, o que significa que ele normalmente pula node_modulesdiretórios; o que geralmente é uma coisa boa.

    Para fazer com que ele detecte pacotes personalizados apesar node_modulesde serem ignorados pelo .gitignore, você pode usar a @sourcediretiva da seguinte maneira:

    ./src/app.css

    /* detects everything except the paths in the .gitignore file */
@import "tailwindcss";

/* if node_modules is ignored in .gitignore, it is possible to perform detection in its subdirectories */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";

    É importante observar que o caminho passado para a @sourcediretiva é relativo e deve ser definido com base na localização do arquivo CSS.

    Se o TailwindCSS não detectar nada, é possível que você tenha desabilitado a detecção de origem durante a importação usando source(none). Nesse caso, o TailwindCSS escaneará apenas os caminhos especificados com a @sourcediretiva.

    ./src/app.css

    /* source(none) disables all detection, so it doesn't detect anything by default */
@import "tailwindcss" source(none);

/* in this case, it only detects the paths specified with @source */
@source "./"; /* relative path for src, since app.css in my example is located in src  */
@source "../node_modules/mypackage-first";
@source "../node_modules/mypackage-second/subdirectory/etc";
    • 1

relate perguntas