front-matter VS pico

To set our metadata dynamically, we also imported the front-matter dependency.

front-matter parser

What we want is for our editor to take the combination of front-matter data and markup, then be able to extract the two before storing that data separately somewhere. We'll be using the front-matter module to extract the data we need from the text editor content.

I personally prefer Bootstrap to Tailwind, but my favorite is https://picocss.com/

Usually, I just want decent-looking default CSS styles. The benefits of a CSS framework have diminishing returns when using frameworks with styles scoped to components (like SvelteKit/Vue/React).

The fact Tailwind removes all styles so you can't even tell a button is a button unless you add classes is annoying. If you know the class names, sometimes it's a little more convenient to add Tailwind classes, but for the most part it just clutters the HTML. And it makes it difficult to update entire "classes" of elements: you have to update each element one at a time.

Do you want to customize it or get something that looks decent out of the box? Consider something like Pico.css which is just a stylesheet that can even be used classless. It just styles the native HTML elements in a nice way and nothing more.

According to its homepage, Pico is a minimal CSS framework for semantic HTML. Pico styles the built-in HTML elements so that when you’re building a small app, you don’t need to write a lot of custom CSS.

Here, Pico CSS comes into the picture. In some ways, it is the anti-Tailwind library. Pico CSS discourages using a large number of .classes in your application. Instead, it styles the semantic HTML elements in such a way that you don’t need to write a lot of code yourself.

For styling you could try daisyUI on top of tailwind or you could use something like https://picocss.com

I still write basic HTML, styled using any of a number of simple classless CSS templates, like Pico.

[0] https://picocss.com/

These days I personally like using https://picocss.com/ and customizing from there. I haven't tested it in a large application yet so I'm not sure if that scales great, but it certainly is great for solo small projects or proofs of concept.

Check out https://picocss.com/

- https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

I'd reach for something like Pico.css as a starting point. HTML-first really helps adhere to semantic html principles, and will work well with any JS framework. I'd love to see something like this that would go hand in hand with Tailwind but haven't taken the time to look or build it.