Tremor with tailwind css 4

[shriharip]

Pretty much the title. I tried to use it in a project that has tailwind css version 4 (4.0.7) .

I added the npm package . but importing them does not render the charts or components.

my tailwind.config.js is not there and I have made changes to the css file itself as per the docs . Here is the file

@import "tailwindcss";

@plugin "@tailwindcss/forms"
@plugin "@tailwindcss/typography"
@plugin "@headlessui/tailwindcss"

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideDownAndFade {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes slideUpAndFade {
  from {
    transform: translateY(0%);
    opacity: 1;
  }
  to {
    transform: translateY(-6px);
    opacity: 0;
  }
}

@keyframes slideLeftAndFade {
  from {
    transform: translateX(-6px);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideRightAndFade {
  from {
    transform: translateX(0%);
    opacity: 1;
  }
  to {
    transform: translateX(6px);
    opacity: 0;
  }
}

@keyframes accordionOpen {
  from {
    height: 0;
  }
  to {
      height: "var(--radix-accordion-content-height)"
  }
}

@keyframes accordionClose {
  from {
    height: "var(--radix-accordion-content-height)"
    opacity: 1;
  }
  to {
    height: 0;
    opacity: 0;
  }
}

@keyframes dialogOverlayShow: {
          from: { opacity: "0" },
          to: { opacity: "1" },
        },

@keyframes dialogContentShow: {
          from: {
            opacity: "0",
            transform: "translate(-50%, -45%) scale(0.95)",
          },
          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
        },

--animate-hide : hide 150ms cubic-bezier(0.16, 1, 0.3, 1);

--animate-slideDownAndFade : slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-slideUpAndFade : slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-slideLeftAndFade : slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-slideRightAndFade : slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);

--animate-accordionOpen : accordionOpen 150ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-accordionClose : accordionClose 150ms cubic-bezier(0.16, 1, 0.3, 1);

--animate-dialogOverlayShow : dialogOverlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
--animate-dialogContentShow : dialogContentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);

Rest everything is kept same.

[jaeyson]

@shriharip does this have something to do with legacy config file?

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

@config "../../tailwind.config.js";

The corePlugins, safelist, and separator options from the JavaScript-based config are not supported in v4.0.