im getting this Tailwind issue i'm following tutorials from Youtube.. its a Spotify clone using next, tailwind..
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,
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"
}
}
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}",
],