reactjstailwind-cssnext.js13tailwind-ui

tailwind style is not working in next app when i added tailwind-merge dependency


im getting this Tailwind issue i'm following tutorials from Youtube.. its a Spotify clone using next, tailwind..

GitHub Project link here

im trying to design this side bar, after i have added tailwind-merge dependency,, styles are not getting applied to my project,, and doesn't work even if i remove remove this dependency,

Vs

Vs

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

package.json

{
  "name": "spotify",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.0.1",
    "tailwind-merge": "^2.4.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Solution

  • It seems you may have misconfigured your content file globs:

    const config: Config = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
      ],
    

    You have the sidebar code in component folder (no s suffix). This folder is not covered by your content file globs. Consider adding/amending your globs:

    const config: Config = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        // No 's', `components` → `component`
        "./component/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
      ],