error in react app vercel deployment. plugins: [require("tailwindcss-animate")] ERROR: ReferenceError: require is not defined

Question

i am getting error in tailwind.config.json file in deployment on vercel but it work well in local.

tailwind.config.json

export default {
    // ...
    plugins: [require("tailwindcss-animate")],

if i comment this line and try to deploy this work properly but animation not work.

on vercel i am getting following error:

ReferenceError: require is not defined
    at file:///vercel/path0/client/tailwind.config.js:56:12
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)

i am usign vite + react + TS.

i have tailwindcss-animate dependency in package.json file.

Answer 1

Try this with import

import * as tailwindAnimate from "tailwindcss-animate"

export default {
    // ...
    plugins: [tailwindAnimate],