tailwindcss-marker

Tailwind CSS plugin to style list and summary markers - Download Link

Install

npm install @radishio/tailwindcss-marker

Generated Classes

This plugin generates the following classes, for styling listitem <li> markers, as well as <summary> markers.

Based on the following configuration, the following classes are created.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      brand: '#ed1c16' // Coca-Cola Brand
      ...
    }
  }
}

List Markers

For uniform styling of all list items, .list-marker-<colorname> is used on a <ul> or <ol>.

-- Example Brand
.list-marker-brand > ::marker {
    color: #ed1c16
}

<!-- All markers are in the color as defined in the CSS. -->
<ul class="m-10 p-2 bg-gray-300 list-inside list-disc list-marker-brand">
  <li>This is a simple list example </li>
  <li>Yay!</li>
</ul>

List Item Markers / Summary Markers

For styling individual <li> elements or <summary> elements, the use of the .marker-<colorname> class is provided.

.marker-brand::-webkit-details-marker, .marker-brand::marker {
    color: #ed1c16
}

<ul class="m-10 p-2 bg-gray-300 list-inside list-disc">
  <!-- Marker Color as defined in CSS -->
  <li class="marker-brand">This is a simple list example </li>
  <!-- Default Color -->
  <li>Yay!</li>
</ul>

<details class="m-10">
  <summary class="marker-brand">How can i change the marker color?</summary>

  Add `.marker-brand` to the `<summary>`-element.
</details>