Hi all,
Right now I have my development set up so that a “styles.css” is generated next to the main.js and manifset.json of the plugin. However, I’m not sure how this is to be loaded into Obsidian. I know I could write something in onload of the plugin to manually and a link tag, but I was hoping there existed a more elegant solution.
Are you referring this for TailwindCSS ?
Actually you dont have to worry about loading style.css file at all. Simply create your elements withe the classname and the corresponding style in the style.css file. It will be automatically downloaded by Obsidian when your plugin is installed and loaded.
To get some help in working with TailwindCSS to have smooth setup. Here is one resource which you might like, it also makes use of vite : GitHub - zeroliu/obsidian-tailwindcss
I can’t seem to find any documentation on how styles.css is loaded by plugins. My styles.css is not being loaded into the plugin and is not present in my sources in the Obsidian inspector.
Are there more detailed instructions on how to implement styles somewhere?
Not, that I know of.
Also, I hope your style.css file is placed in the root of your project.
Also there is this, if you are planning to use pure TailwindCss : GitHub - emilio-toledo/obsidian-svelte-plugin: Powerful Obsidian plugin template with Svelte and TailwindCSS (UnoCSS).
But its pretty old, just use to refer it.
Two things:
style.css or styles.css?styles.css next to the main.ts and the manifest.json.I have been using that repo as reference, along with some others.
For whatever reason I’m not seeing styles.css load into the sources tab in the window inspector. I’m trying some other things out, but it’s not clear to me why it wouldn’t be loading.
styles.css.vault/.Obsidian/plugins/your-plugin/styles.css.Not sure if thats possible, but you should able to see your plugin bundled file.
Where does the plugin styles.css get added to the window? I’m trying to debug but I can’t figure out where I am supposed to see the CSS that I’ve added. It doesn’t appear to be added anywhere as CSS to Obsidian.
Alright, so the way Obsidian adds plugin styles is by taking the styles.css of your plugin and adding its content to a <style></style> tag in the header of the DOM.
The reason that my styles are not working is because I am attempting to use the Tailwind 4.0 Beta, which makes use of native CSS layers. Since all the utilities are in layers, their styling is overridden by the default Obsidian styles. The reason this appears to work in older versions is because the final CSS output is not generated with layers, and therefore can override whatever default styles Obsidian comes with.
Since TW 4.0 no longer supports the use of important as part of a config (there is no config in tw 4.0), it isn’t clear to me how exactly I am supposed to get it working.
Ideally, I’d be able to disable the default Obsidian styles and put them into the @base layer in my styles.css, which would then allow them to be overridden. But I’m not sure if that is possible or wise.
Next is to somehow scope the tailwind classes more specifically to my custom views and svelte components. While this might work, it is insanely annoying.
So, I’m somewhat stuck. I don’t have any problems with using tw 3.x, but this feels like an oversight from the tw devs. It makes it difficult to use tw in projects that have CSS which I as a developer don’t control.
I’ll keep fishing for a solution, but I’m not optimistic.
If anyone wants a nice template to kick-start developing a plugin, this is what I was working on:
Obsidian + Svelte Plugin Tempate
Know that tailwind is not going to override the default obsidian styles as of making this post, but that will change in the future.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.