Changes needed for default styles
Closed this issue · 1 comments
Firstly thanks for this great UI toolkit!
I had a couple of teething issues with the default config, which may benefit from a documentation update.
After working through some styling issues, I am now able to style both dark and light mode:
Dark mode:
Tailwind forms plugin
I found it necessary to remove the Tailwind forms plugin which defaults form element styles such as focus ring colors, and which is not easily overridden except through CSS. The specific issue I had was a blue ring on form inputs, which seems to also plague Shadcn when the Tailwind form plugin is used see shadcn-ui issue here.)
Given Salad-UI toolkit is explicit about the classes it requires on each element, things worked as expected when removing the form plugin which appears to do more harm than good.
plugins: [
// remove forms since is messes up shadcn/Salad-UI styles, including things like padding and a blue focus ring on inputs
//require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("tailwindcss-animate"),Setting default background and foreground
I also found that to allow both dark and light mode colors to work correctly I needed the following on the root layout:
<body class="bg-background text-foreground">
<%= @inner_content %>
</body>an alternative to the above is to use something like the following in app.css:
body {
@apply bg-background text-foreground;
}Border style
Another tweak I made was due to border style not being applied properly, which needed this:
@layer base {
* {
@apply border-border !important;
}I also ended up moving to the main branch instead of hex, which may have also have been a factor in things finally working nicely if you have made changes in these areas.