How to style the markdown ?

[abadger1406]

How best to add styles to the tailwind css for blockquote quotes etc for the markdown sections of hugo ?

Is this the right approach ?

https://github.com/iandinwoodie/github-markdown-tailwindcss

[dirkolbrich]

Do you mean syntax highlighting code blocks within your markdown written content, like this example?

Hi, this is a post with some sample code.

    ```go
    func main() {
        println("Hello, world!")
    }

Some other text for this blog post.

Best would be to use the [build-in Hugo highlighter](https://gohugo.io/content-management/syntax-highlighting/). It gives you standard themes for syntax highlighting. You then have to only style the `<pre>` block from within your main style sheet.

[abadger1406]

Thank you for feedback - not so much thinking about code, more about quotes.

What I mean is is styling a quote, which in markdown is something like:

> This is a quotation.

In the resulting html it will be seen as:

<blockquote>This is a quotation.</blockquote>

By default tailwind 'preflight' aggressively removes lots of styling to create the 'level playing field' for consistency across browsers, e.g:-

https://tailwindcss.com/docs/preflight/

So on my new site has all the markdown content just looking like plain text:-

https://essentials.visitor.express/ Nice front page styled with tail wind - thank you

https://essentials.visitor.express/about/team/dave/ unstyled markdown, not looking so nice,

Really appreciate your help/guidance

[dirkolbrich]

Ok, I see. Yes, the approach you linked is basically correct. In the context of this package add styles which apply to markdown generated content of your hugo site to assets/css/site.css, e.g.

blockquote {
    @apply border-l-4 border-gray-500 pl-2;
}

This style applies to all <blockquote> elements for the whole site now.

If you want different styles for the same element type on different pages, you have to wrap the {{ .Content }} part within your hugo page templates into a page specific element identified by id="" or class="".

For example in your layout template for the about/team page:

<div class="about">
    {{ .Content }}
</div>

Within assets/css/site.css now add:

.about blockquote {
    @apply border-l-4 border-gray-500 pl-2;
}

See also https://tailwindcss.com/docs/extracting-components

[abadger1406]

Thank you - I have done some styling work on markdown which I will push back to this project soon.

Are you available for an email on an opportunity this project provides - 'dave@netfm.org' is me.

https://www.dirkolbrich.de/ is not reachable to get your details

[dirkolbrich]

Weird, it seems to be up from my location, down.com says its reachable, uptrends.com says it's down worldwide and just accepts the basic domain, where it is up. I think I have to check my hoster.

Just try the base domain dirkolbrich.de (written with Hugo and Tailwindcss with this very starter template) or shot me a mail@dirkolbrich.de.