Skip to content

Konsta not working after I went through all installation process #229

@skorphil

Description

@skorphil

Check that this is really a bug

  • I confirm

Reproduction link

https://stackblitz.com/~/github.com/skorphil/savnote

Bug description

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.

Screenshot 2025-03-16 at 14 02 26

Expected Behavior

No response

Actual Behavior

No response

Konsta UI version

Latest

Platform/Target and Browser Versions

All

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR

Metadata

Metadata

Assignees

No one assigned

    Labels

    ReactIssue with Tailwind Mobile React

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions