Cómo poner bullets a las listas en Tailwind con CSS

Te está faltando un estilo CSS para completar los estilos necesarios para que aparezcan los bullets, la propiedad list-style-position.

Lo básico sería colocar esto en CSS:

ul {
  list-style-position: inside;
  list-style-type: disc;
}

Sin embargo, hay otros detalles que pueden darte problemas a la hora de modificar estos estilos y que se vean en la página, porque para empezar depende de dónde coloques ese CSS en tu proyecto. Para asegurarte que lo colocas bien tienes las directivas @layer.

Lo normal sería modificar la base si lo que quieres es que todas las listas tengan bullets.

@layer base {
    ul {
      list-style-position: inside;
      list-style-type: disc;
    }
}

Pero si estás haciendo que las listas de un componente en particular tengan bullets, podrías colocaro en la @layer de components.

@layer components {
  .card ul {
    list-style-position: inside;
    list-style-type: disc;
    margin-left: 1rem;
  }
}

En el código anterior he colocado un margen a la izquierda, que también es muy típico que vayas a necesitar para tus listas estilizadas.

También recuerda que en Tailwind CSS tienes la directiva @apply con lo que podrías escribir este código, que sería el equivalente del anterior:

@layer components {
  .cms ul {
    @apply list-disc list-inside ml-4;
  }
}

Estas alternativas que acabo de señalar puedes hacerlas también usando el @apply necesitas que se coloquen en un CSS que sea procesado por postcss, el procesador que usa tailwind para generar los estilos, por lo que si las pones en un bloque <style> dentro de tu código HTML no se tendrían en cuenta.

Además, por si te viene bien para que una lista en particular tenga los bullets, puedes colocarlo con las clases de utilidad directamente en el HTML:

<ul class="list-disc list-inside">
  <li>Elemento lista</li>
  <li>Otro elemento</li>
</ul>