# How to use Tailwind Classes in MD-Files?

**URL:** <https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688>\
**Category:** Elements\
**Created:** [October 13, 2025, 12:43pm UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688 "2025-10-13T12:43:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [October 13, 2025, 12:43pm UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/1 "2025-10-13T12:43:02Z")

</div>

Hi @Dan,

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

```auto
---
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

```auto
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](https://www.cornrow.de/artikel/curly_treffen_in_s_ddeutschland)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [October 14, 2025, 6:37am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/2 "2025-10-14T06:37:35Z")

</div>

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.

> [@Ulrich](#):
>
> ```php-template
> <img src="/resources/aktuelles/2025-10-02/cornrow_2025-10-02_brosel.jpg"
> alt="Bran vom Wöpplinsberg"
> class="[&_img]:w-[50px]" />
> 
> ```

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:

```php
<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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/6/966d33c1063527e81563ed52756bd9aaa418d111.png)

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 🙂

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [October 14, 2025, 8:08am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/3 "2025-10-14T08:08:49Z")

</div>

> [@ben](#):
>
> If you’re trying to style the image directly, just do this instead:
> 
> ```auto
> <img src="..." alt="..." class="w-[50px]" />
> 
> ```

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.

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 14, 2025, 9:28am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/4 "2025-10-14T09:28:46Z")

</div>

> [@ben](#):
>
> `<img src="..." alt="..." class="w-[50px]" />`

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

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [October 14, 2025, 9:42am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/5 "2025-10-14T09:42:40Z")

</div>

Ben said it should, but it doesn’t.

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

works

---

<div class="post-metadata">

**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\
**Post date:** [October 14, 2025, 9:44am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/6 "2025-10-14T09:44:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [October 14, 2025, 10:06am UTC](https://forums.realmacsoftware.com/t/how-to-use-tailwind-classes-in-md-files/51688/7 "2025-10-14T10:06:33Z")

</div>

Is the following limiting the width to 50px ?

class=“w-[50px]”