Início / coding / Perguntas / 79572864
Accepted
Gazi
Asked: 2025-04-14 18:01:47 +0800 CST

Como configurar o Hero UI com TailwindCSS v4

  • 772

Aqui estão os detalhes:

  • Next.js v15.x
  • TailwindCSS v4.x
  • Hero UI: mais recente

As classes Tailwind funcionam, mas a interface do herói não mostra nenhum estilo.

pacote.json

{
  "dependencies": {
    "@heroui/react": "^2.7.6",
    "axios": "^1.8.4",
    "framer-motion": "^12.6.5",
    "next": "15.3.0",
    "next-auth": "^4.24.11",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4.1.3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.4.21",
    "eslint": "^9",
    "eslint-config-next": "15.3.0",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.1.3",
    "typescript": "^5"
  }
}

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

globais.css

@import 'tailwindcss';
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

@custom-variant dark (&:is(.dark *));

Como posso resolver isso?

next.js

1 respostas

  1. Best Answer

    HeroUI trabalhando ativamente no suporte ao TailwindCSS v4

    Você mencionou que está usando o HeroUI v2.7.6:

    {
  "dependencies": {
    "@heroui/react": "^2.7.6",
  }
}

    No entanto, o suporte para TailwindCSS v4 ainda está em desenvolvimento e atualmente disponível apenas na versão beta:

    Estamos trabalhando ativamente no suporte ao Tailwind CSS v4! Você pode conferir nossa versão beta em beta.heroui.com .

    Portanto, para suporte ao TailwindCSS v4, você precisará de pelo menos a v2.8; ou seja, a versão beta atual do HeroUI.

    npm install @heroui/react@beta

    Observação : embora a etapa de migração mencione o uso da configuração legada baseada em JS para o TailwindCSS v4, acredito que não seja obrigatório.

    DICA : Para um projeto de produção, recomendo aguardar a próxima versão estável. O TailwindCSS v3 também pode ser migrado para a v4 posteriormente.

    Detecção Automática de Fonte

    A partir do TailwindCSS v4, a detecção automática de origem está integrada. Ela sabe quais arquivos escanear e onde procurar. No entanto, ignora os caminhos listados em .gitignore, incluindo node_modules. Por isso, é necessário especificar o caminho para determinados pacotes que precisam ser escaneados; basta fornecer o caminho:

    ./src/global.css

    @import 'tailwindcss';

@source '../node_modules/@heroui/theme/dist';

@custom-variant dark (&:is(.dark *));

    Observação : lembre-se de que a @sourcediretiva espera um caminho relativo a partir da pasta do arquivo CSS atual. Portanto, com base no caminho que você mencionou na sua pergunta, seu global.cssestá presumivelmente um nível mais abaixo do que node_modules, por exemplo, localizado na srcpasta. (No caso de ./src/css/global.css, o caminho já seria algo como ./../../node_modules...).

    • 1

relate perguntas