Package Exports

@neupauer/tailwindcss-plugin-marker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@neupauer/tailwindcss-plugin-marker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind CSS Plugin – Marker

This plugin allows you to customize the list marker box.

Install

Install the plugin:

# Using npm
npm install @neupauer/tailwindcss-plugin-marker --save-dev

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-marker -D

Add it to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-marker")],
};

Configuration

By default, no variation is added, so you must enable it yourself.

E.g, enable variations for text color (marker:text-red-500) and list style type (marker:list-disc)

// tailwind.config.js
module.exports = {
  variants: {
    textColor: [/** ... */, "marker"],
    listStyleType: [/** ... */, "marker"],
  },
};

Usage

You must first add the "activator" class .marker and then you can use the enabled variants

<ul class="marker marker:list-disc marker:text-red-500">
  <li>Hello</li>
  <li>World</li>
</ul>

<!-- With prefix `tw-` -->
<ul class="tw-marker marker:tw-list-disc marker:tw-text-red-500">
  <li>Hello</li>
  <li>World</li>
</ul>

<!-- With responsive variant -->
<ul class="marker marker:list-disc marker:text-red-500 sm:marker:text-blue-500">
  <li>Hello</li>
  <li>World</li>
</ul>