Bruh not able set up themes colors extends anything can anyone help me plsss?? In my react+vite project?

[Jyotishmoy12]

Here is my tailwind.config.ts file looks like -->

`import type { Config } from "tailwindcss";

export default {
darkMode: ["class"],
content: [
"./pages//*.{ts,tsx}",
"./components//.{ts,tsx}",
"./app/**/.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
hero: {
primary: "#1E293B",
accent: "#E2E8F0",
highlight: "#7C3AED"
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
},
fontFamily: {
sans: ["Inter", "sans-serif"],
},
keyframes: {
"fade-up": {
"0%": {
opacity: "0",
transform: "translateY(20px)",
},
"100%": {
opacity: "1",
transform: "translateY(0)",
},
},
"fade-in": {
"0%": {
opacity: "0",
},
"100%": {
opacity: "1",
},
},
float: {
"0%, 100%": {
transform: "translateY(0)",
},
"50%": {
transform: "translateY(-10px)",
},
},
},
animation: {
"fade-up": "fade-up 0.8s ease-out",
"fade-in": "fade-in 1s ease-out",
float: "float 3s ease-in-out infinite",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;`

[wongjn]

Are you using Tailwind v3 or v4? Could you provide your input CSS file? Could you explain more about what gives you the impression that this is not working?

[Jyotishmoy12]

What do you mean by input css file? Sorry I didn't understand 🥲. And about my error in my hero component I am using some themes and all which you can here my tailwind config file but since it's no longer working idk how to proceed how to use my custom themes and all??

…

On Mon, 17 Feb 2025, 11:20 pm Justin Wong, ***@***.***> wrote: Are you using Tailwind v3 or v4? Could you provide your input CSS file? Could you explain more about what gives you the impression that this is not working? — Reply to this email directly, view it on GitHub <#16603 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWHRKHO2YQ7AKFQYBOXIJTT2QIOOVAVCNFSM6AAAAABXJ3EPWWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMRSG43TAMY> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[wongjn]

What do you mean by input css file?

The CSS file that you import into the project.

but since it's no longer working idk how to
proceed how to use my custom themes and all??

I'm sorry, I don't understand.

Also, are you using Tailwind v3 or v4?

[Jyotishmoy12]

V3.. can you please tell me where I should be the contents of tailwind.config.ts file in the new version of tailwind? And how to use it?

…

On Tue, 18 Feb 2025, 2:30 am Justin Wong, ***@***.***> wrote: What do you mean by input css file? The CSS file that you import into the project. but since it's no longer working idk how to proceed how to use my custom themes and all?? I'm sorry, I don't understand. Also, are you using Tailwind v3 or v4? — Reply to this email directly, view it on GitHub <#16603 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWHRKHN5S2XEDH5XTFHJFNT2QJEU7AVCNFSM6AAAAABXJ3EPWWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMRSHEZDANI> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[wongjn]

Consider reviewing the documentation.

[Jyotishmoy12]

And my file is index.css only.. it only has that import statement of tailwind css which is described in their Website according to the newer version On Tue, 18 Feb 2025, 3:23 am Jyotishmoy Deka, ***@***.***> wrote:

…

V3.. can you please tell me where I should be the contents of tailwind.config.ts file in the new version of tailwind? And how to use it? On Tue, 18 Feb 2025, 2:30 am Justin Wong, ***@***.***> wrote: > What do you mean by input css file? > > The CSS file that you import into the project. > > but since it's no longer working idk how to > proceed how to use my custom themes and all?? > > I'm sorry, I don't understand. > > Also, are you using Tailwind v3 or v4? > > — > Reply to this email directly, view it on GitHub > <#16603 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AWHRKHN5S2XEDH5XTFHJFNT2QJEU7AVCNFSM6AAAAABXJ3EPWWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMRSHEZDANI> > . > You are receiving this because you authored the thread.Message ID: > ***@***.*** > .com> >

[wongjn]

Yes, that's correct for v4. You'd then want to port your theme config to the v4 version: https://tailwindcss.com/docs/theme