-
-
Notifications
You must be signed in to change notification settings - Fork 142
Closed
Labels
ReactIssue with Tailwind Mobile ReactIssue with Tailwind Mobile React
Description
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.

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
nicu
Metadata
Metadata
Assignees
Labels
ReactIssue with Tailwind Mobile ReactIssue with Tailwind Mobile React