markdown it attrs with slashes dont work
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Attrs does not like '/' characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.

Date: February 1, 2025

Attrs does not like ‘/’ characters in its classes, so to use some tailwind classes with custom values we must make new classes in our tailwind input css.

[code]
  .cinematic {
    @apply aspect-[2.39/1];
  }

Given the following markdown with attrs added to the image and to the paragraph block.

[code]
  ![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.aspect-[2.39/1]}

  ![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png){.cinematic}

  {.cinematic}
  ![screenshot-2025-01-31T14-50-00-094Z.png](https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png)

We get the following output with only the middle one working correctly.

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>{.aspect-[2.39/1]}

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>

Image: screenshot-2025-01-31T14-50-00-094Z.png <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png> <https://dropper.waylonwalker.com/api/file/50cfa8dc-9d46-4f02-877b-688fa5510a83.png>

NOTE
│ [code]
│   The inline version of `.cinematic` works, but `.aspect-[2.39/1]` does not,
│ 
│ it turns into text after the image. The block version with the class before the image applies to the paragraph, not the image.