Início / coding / Perguntas / 79553661
Accepted
Hmmmmm
Asked: 2025-04-04 01:50:36 +0800 CST

Tailwind CSS não funciona com NextJS rebaixado

  • 772

Eu tinha um projeto Next 14.2.3 funcionando perfeitamente, que tive que fazer downgrade para 14.1.4 devido a um problema com agora-rtm-sdk. Mas depois de fazer downgrade, todo meu CSS meio que desapareceu. Como posso consertar isso?

Este é meu arquivo tailwind.config.ts

import type { Config } from "tailwindcss";
import daisyui from "daisyui";

const config: Config = {
  daisyui: {
    themes: [
      {
        mytheme: {
          primary: "#E84644",
          secondary: "#111111",
          "base-200": "#111111",
          "base-100": "#292929",
          success: "#24B833",
          info: "#1E1E1E"
        },
      },
    ],
  },
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/Components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [daisyui],
};
export default config;

arquivo postcss.config.mjs

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

export default config;

arquivo globals.css

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

o arquivo layout.tsx raiz

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "../globals.css";
import Navbar from "@/Components/Desktop/Navbar/Navbar";

const poppins = Poppins({
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Stranger Hub",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" data-theme="dark">
      <body className={poppins.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}

imagem de exemplo para mostrar que nenhum css foi aplicado após a alteração

next.js

1 respostas

  1. Best Answer

    Se alguém enfrentou o mesmo problema ao fazer o downgrade da versão 14.2.3 para a 14.1.4, isso pode ser corrigido seguindo estas etapas.

    Primeiro, renomeie o postcss.config.mjsarquivo postcss.config.jse substitua o conteúdo por:

    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

    Agora, instale autoprefixercomo dependência dev, você também pode fazer downgrade do tailwind

    "autoprefixer": "^10.0.1",
"tailwindcss": "^3.3.0",

    Por fim, exclua a .nextpasta e reconstrua o aplicativo

    PS: Descobri isso criando um novo aplicativo NextJS 14.1.4 e observando as diferenças... talvez haja outra maneira de consertar isso, mas por enquanto isso funcionou para mim.

    • 0

relate perguntas