I’m trying to create a custom color and name it primary but it doesn’t seem to work. It works when using other names but it feels like there should be a way to naming it primary? What am I missing?
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primary: "red",
},
},
},
plugins: [],
};
example.jsx
<nav class="flex items-center justify-between flex-wrap bg-primary p-6">
...
</nav>
4
Try this code:
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
primary: {
DEFAULT: "red", // For `bg-primary`
500: "red", // For `bg-primary-500`
},
},
},
},
plugins: [],
};I believe in Tailwind CSS, custom colors like primary need to be properly registered and referenced in your classes. The issue you’re facing is likely because Tailwind’s color classes follow a specific naming convention where you append shade numbers to the color name (like primary-500, primary-700, etc.). If you want to use bg-primary directly, Tailwind doesn’t recognize it by default.