Next.js Discord

Discord Forum

Tailwindss not detected in the nextjs

Unanswered
Channel catfish posted this in #help-forum
Open in Discord
Channel catfishOP
Hello, in my Nextjs project, there is dashboard login and register in the admin folder. I am having a tailwindss color detection problem in the login. When I put the login in the dashboard, the tailwindss color problem is solved. When I add a folder called trial in the admin, tailwindss color is not detected there either, but in the photo, tailwindss color is detected in the admin page.tsx. I have been struggling with this problem for a week. How can I solve this problem? I have sent my project github link, can you examine the admin folder in the project? Good evening
https://github.com/mi-cloud34/nestjs_etrade_adminpanel_fullstack

1 Reply

Channel catfishOP
 import type { Config } from "tailwindcss";
import { createThemes } from "tw-colors";
import colors from "tailwindcss/colors";

const baseColors = [
  "gray",
  "red",
  "yellow",
  "green",
  "blue",
  "indigo",
  "purple",
  "pink",
];

const shadeMapping = {
  "50": "900",
  "100": "800",
  "200": "700",
  "300": "600",
  "400": "500",
  "500": "400",
  "600": "300",
  "700": "200",
  "800": "100",
  "900": "50",
};

const generateThemeObject = (colors: any, mapping: any, invert = false) => {
  const theme: any = {};
  baseColors.forEach((color) => {
    theme[color] = {};
    Object.entries(mapping).forEach(([key, value]: any) => {
      const shadeKey = invert ? value : key;
      theme[color][key] = colors[color][shadeKey];
    });
  });
  return theme;
};

const lightTheme = generateThemeObject(colors, shadeMapping);
const darkTheme = generateThemeObject(colors, shadeMapping, true);

const themes = {
  light: {
    ...lightTheme,
    white: "#ffffff",
  },
  dark: {
    ...darkTheme,
    white: colors.gray["950"],
    black: colors.gray["50"],
  },
};

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{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: [createThemes(themes)],
};

export default config;
Hello, my tailwindcss config file is like this, for example, it detects the color in the dashboard in the admin folder, but it does not detect the login. When I change my tailwindcss config file to the first project I created, my problem is solved, tailwindcss color is detected everywhere. How can I fix my tailwindcss config.ts file? Good night.