Tailwinds css error when using @apply process

Question

enter image description here

Hi everyone, I have set up a simple Nextjs project and I try to use @apply processor and it shows me the error above.

My package.json

{
  "name": "simon-bask-health-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prepare": "husky install"
  },
  "dependencies": {
    "-": "^0.0.1",
    "@react-google-maps/api": "^2.19.2",
    "chart.js": "^4.4.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "flowbite": "^1.8.1",
    "flowbite-react": "^0.6.4",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "next": "13.5.4",
    "path": "^0.12.7",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18",
    "save-dev": "^0.0.1-security"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "13.5.4",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.5",
    "tailwindcss": "^3",
    "typescript": "^5"
  }
}

My tailwind config file:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        textColor: "#111",
      },
      fontFamily: {
        inter: ["var(--font-inter)"],
        sulphur: ["var(--font-sulphur-point)"],
        roboto: ["var(--font-roboto)"],
      },
      backgroundColor: {
        buttonBackgroundColor: "#404040",
        hoverButtonBackgroundColor: "#000",
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};
export default config;

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./node_modules/flowbite-react/**/*.js",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        textColor: "#111",
      },
      fontFamily: {
        inter: ["var(--font-inter)"],
        sulphur: ["var(--font-sulphur-point)"],
        roboto: ["var(--font-roboto)"],
      },
      backgroundColor: {
        buttonBackgroundColor: "#404040",
        hoverButtonBackgroundColor: "#000",
      },
    },
  },
  plugins: [require("flowbite/plugin")],
};
export default config;

My postcss config file

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

My global.css file and you can see the @apply is used to style the h1 element

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

body {
  margin: 0;
}

button {
  cursor: pointer;
}

h1 {
  @apply text-sm;
}

@layer {
  //Classes to hide scroll bar
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

Please help me to figure this out. Thanks.

I have tried installing again all needed packages but it does not work.

Answer 1

It seems like the errors are not related to @apply but are actually related to the line:

//Classes to hide scroll bar

It seems like you may be trying to use Sass syntax for comments by starting the line with two slashes (//) but this is invalid CSS syntax. Instead, consider using /* and */ to surround the comment text:

/* Classes to hide scroll bar */