Difficulties to style li/ul using tailwind and kirbytext

The CMS Questions
1

Hi,
I’m actually facing a problem to style my list correctly using tailwind with kirby and kirbytext.

I’m my php i running this call to kirbytext(), wrapped into the correct class for list with tailwind :

      <div class="text-base list-disc list-outside">
        <?= $site->baseline()->kirbytext() ?>
      </div>

My text is markdown in .txt :

----

Baseline:

blablablablablablablablablablablablabla
blablablablablablablablablablablablablablablablabla 

Objectives : 

- xxx
- xxx
- xxx
- xxx

Actually the li and ul are not styled at all :frowning:

2

welcome to the forum.

tailwind classes need to be applied directly to the ul element not the wrapping div.

you can either create a helper css class

.typography {
   ul {
      @apply list-disc list-outside;
   }
}

<div class="text-base typography">
        <?= $site->baseline()->kirbytext() ?>
</div>

or try to use and configure the tailwind plugin: @tailwindcss/typography - Tailwind CSS
but that is a bit advanced.

3

Also see my blog article on that how to fix this situation. But bnomei’s mention of the typography plugin is worth a consideration. But note that it’s opinionated, too.

4

Thanks for taking the time to write the blog post. Can you confirm the @layer base approach is still valid in Tailwind v4. It works with my initial test but just checking its not depreciated.

5

Sorry only saw this new question now. It’s standard CSS and should therefore definitely be valid and working in any upcoming Tailwind version as it’s not directly dependent.