How to use Tailwind Classes in MD-Files?

Elements How do I…
1

Hi @Dan,

i have inline Images in my CSS-MD-Files like:

---
title: "Curly Treffen in Süddeutschland"
date: "2025-10-02"
tags: []
categories: []
author: Ulrich
image:
    src: /aktuelles/2025-10-02/cornrow_2025-10-02_brosel_archie_lila.jpg
    alt: CORNROW Curlytreffen in Süddeutschland
---

Heute hatten wir Besuch von unseren Freunden und ihren zwei Curly-Rüden,
<img src="/resources/aktuelles/2025-10-02/cornrow_2025-10-02_brosel.jpg"
     alt="Bran vom Wöpplinsberg"
     style="float:right;width:16rem;max-width:40vw;margin:0.5rem 0 0.5rem 1rem;border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);object-fit:cover;" />
<img src="/resources/aktuelles/2025-10-02/cornrow_2025-10-02_brosel_archie.jpg"
     alt="Brösel und CORNROW Archie"
     style="float:right;width:16rem;max-width:40vw;margin:0.5rem 0 0.5rem 1rem;border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);object-fit:cover;clear:right;" />
Brösel (Bran vom Wöpplinsberg) und Archi (Cornrow Archie), aus Kassel. Brösel ist der Vater von Archie und Asta – drei Generationen zusammen. Das war ein ganz besonderes Wiedersehen, das uns sehr gefreut hat.

I use style. You have written in an other thread that it is possible to use Tailwind Classes.
[&_img]:w-[50px]

If i use

Heute hatten wir Besuch von unseren Freunden und ihren zwei Curly-Rüden,
<img src="/resources/aktuelles/2025-10-02/cornrow_2025-10-02_brosel.jpg"
     alt="Bran vom Wöpplinsberg"
     class="[&_img]:w-[50px]" />
<img src="/resources/aktuelles/2025-10-02/cornrow_2025-10-02_brosel_archie.jpg"
     alt="Brösel und CORNROW Archie"
     style="float:right;width:16rem;max-width:40vw;margin:0.5rem 0 0.5rem 1rem;border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);object-fit:cover;clear:right;" />
Brösel (Bran vom Wöpplinsberg) und Archi (Cornrow Archie), aus Kassel. Brösel ist der Vater von Archie und Asta – drei Generationen zusammen. Das war ein ganz besonderes Wiedersehen, das uns sehr gefreut hat.

the first image is really big.

What is my mistake? Could you help me please?

See: Artikel | CORNROW

2

You can’t rely on Tailwind classes being applied when they’re used inside Markdown files. That’s because Markdown content isn’t scanned by Elements during the build process, so the necessary CSS might not be generated.

Even if the CSS was generated for this class, the above code won’t work as expected.

The reason is that [&_img]:w-[50px] is an arbitrary variant in Tailwind, and it’s designed to be used on a parent element, not directly on the <img> tag itself.

That class tells Tailwind to “apply w-[50px] to any <img> elements inside this element.” If you’re trying to style the image directly, just do this instead:

<img src="..." alt="..." class="w-[50px]" />

If you want to style images inside a Typography component, for example when using the CMS, you should apply your original class to the Typography component’s CSS Classes, like so:

CleanShot 2025-10-14 at 08.33.16@2x
CleanShot 2025-10-14 at 08.33.16@2x620×1024 38.1 KB

That will style all images inside the Typography component to have a width of 50 pixels.

We can also guarantee that the CSS for this class will be generated as it’s being added to a component on your page (rather than nested inside a markdown file).

Hope that helps :slight_smile:

1 Like
3

Unfortunately, that doesn’t work. It is inside of Typography Element. But it’s really not that important since I can use style="...". I just thought it would be better to use Tailwind classes, so i can learn them right away and it would be easier to use animations, etc.

Thanks Ben.

4

Forgive my stupidity but what exactly does this do ? I imagined it made the width of the stated image 50px wide

5

Ben said it should, but it doesn’t.

<img src="..." alt="..." style="width:50px;" />

works

6

To clarify, I am using this within the Markdown portion of an MD file used in CSS.

7

Is the following limiting the width to 50px ?

class=“w-[50px]”