Início / coding / Perguntas / 79440161
Accepted
HoRiz
Asked: 2025-02-15 01:39:48 +0800 CST

Erro ao adicionar Tailwind CSS a um projeto React - vite existente

  • 772

Estou trabalhando em um projeto React baseado em Vite. Quero adicionar Tailwind CSS e, após seguir os passos abaixo, estou encontrando um erro.

1. npm install -D tailwindcss postcss autoprefixer

Inicializar Tailwind CSS

2. npx tailwindcss init -p

O primeiro comando foi executado sem erros. No entanto, o segundo comando resultou no seguinte erro:

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\HelloWorld\AppData\Local\npm-cache\_logs\2025-02-14T17_30_29_652Z-debug-0.log

Eu tentei limpar o npm,

Clear npm Cache

Ainda não funcionou. O mesmo erro ocorreu ao executar o segundo.

reactjs

1 respostas

  1. Best Answer

    Tailwind CSS v3 - Versão 3.0

    A instalação do TailwindCSS v3 e v4 é diferente. Você esperava a instalação v3, mas v4 é a nova versão mais recente. Para instalação v3, use:

    npm install -D tailwindcss@3

    Tailwind CSS v4 - Versão 4.0

    No entanto, se você quiser instalar a v4, recomendo revisar os guias de instalação, pois há mudanças significativas entre a v3 e a v4.

    npm install tailwindcss @tailwindcss/vite

    A partir da v4, não há necessidade de um processo init, pois ele foi completamente removido. O npx tailwindcsscomando também não é mais necessário, pois foi separado em um @tailwindcss/clipacote dedicado.

    @tailwindcss/vitePara o Vite, foi criado um plugin dedicado , enquanto a compatibilidade com o PostCSS é garantida pelo @tailwindcss/postcssplugin.

    Não há necessidade de Autoprefixer ou PostCSS. O V4 é construído em um mecanismo completamente novo, LightningCSS, e, como resultado, ele não suporta mais pré-processadores Sass, Less ou Stylus.

    A v4 foi projetada para o longo prazo, e é por isso que os requisitos mínimos do navegador foram significativamente aumentados. Isso é justificado principalmente pelo uso de excelentes recursos CSS que estão disponíveis há alguns anos, como oklch(), color-mix(), @propertye outros. Verifique os requisitos mínimos aqui: TailwindCSS v4 Browser Support

    A partir da v4, uma configuração CSS-first é aplicada por padrão. No entanto, é possível reverter para a configuração legada baseada em JavaScript usando a @configdiretiva. Por isso, um tailwind.config.jsarquivo não é mais necessário por padrão.

    • 1

relate perguntas