Konsta not working after I went through all installation process

[skorphil]

React, Vite, React Router(data mode)

Please help me to diagnose what is going on:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import konstaConfig from "konsta/config";

export default konstaConfig({
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}) satisfies Config;

Main.tsx

import { App, KonstaProvider } from "konsta/react";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <KonstaProvider theme="material">
      <App theme="material" className="k-material">
        <RouterProvider router={router} />
      </App>
    </KonstaProvider>
  </React.StrictMode>
);

Home page:

import { Block, Button } from "konsta/react";

function Home() {
  return (
    <>
      <Block>
        <p className="font-light">This is block with text</p> // test if Tailwind is working
      </Block>
      <Block className="space-y-4">
        <p>Here comes the button</p>
        <Button>Action</Button>
      </Block>
    </>
  );
}

export default Home;

main.css

@import "tailwindcss";

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#root {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

Tailwind class working, konsta components not rendering. I can't understand why.

[komisz]

Have a similar issue using it via a Remix project. It looks like Tailwind v4 is not yet available. Use tailwindcss@3.4.17 instead, in the traditional way with PostCSS, and not the Vite plugin method, and you’ll be good to go.