My Tailwind classes are giving me trouble.
I faced an issue when I created a new component in the directory and placed my Button component there.
Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define them again. Here are the files tailwind.config.css, Button.js, and Navbar.js:
tailwind.config.css:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
primary: '#FFD700',
secondary: '#00CED1',
accent: '#FF6347',
success: '#32CD32'
},
},
},
plugins: [],
};
Button.js:
'use client'
import React, { useState, useEffect } from 'react'
const Button = ({ children, color }) => {
const [colorPicker, setColorPicker] = useState('')
const [colorWeight, setColorWeight] = useState(0)
useEffect(() => {
switch (color) {
case 'primary':
setColorPicker('amber')
setColorWeight(300)
break;
case 'secondary':
setColorPicker('teal')
setColorWeight(500)
break;
case 'seccess':
setColorPicker('lime')
setColorWeight(600)
break;
case 'accent':
setColorPicker('red')
setColorWeight(500)
break;
}
}, [color])
return (
<div>
<button className={`bg-${color} px-4 py-1 rounded-xl hover:bg-${colorPicker}-${colorWeight} focus:bg-${colorPicker}-${colorWeight + 100} focus:ring-4 focus:ring-${colorPicker}-${colorWeight - 200} duration-200 text-white`}>
{children}
</button>
</div>
)
}
export default Button
Navbar.js
import Link from 'next/link';
import Button from './Button';
const Navbar = () => {
return (
<div>
<div className='flex justify-between items-center'>
<div>
<div className='flex'>
<img src="" alt="Logo" />
<p>Croissant</p>
</div>
</div>
<div>
<ul className='flex gap-3 items-center'>
<Link href='/'>
<li>Home</li>
</Link>
<Link href='/about'>
<li>About me</li>
</Link>
<Link href='/posts'>
<li>Posts</li>
</Link>
<Link href='/login'>
<li>
<Button color='primary'>Login</Button>
</li>
</Link>
</ul>
</div>
</div>
</div>
)
}
export default Navbar