tailwindcss-question-mark

tailwindcss-question-mark

A plugin that provides a helpful ? dev time utility.

Demo: https://play.tailwindcss.com/fXhD65EpG4?layout=horizontal

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-question-mark

# Using Yarn
yarn add tailwindcss-question-mark

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-question-mark"),
    // ...
  ],
};

Usage

Simply add the ? utility class to any element that you'd like to highlight. By default, the utility will animate the element with a pink highlight.

Optionally, you can specify a color by using the ?-{color} utility class with {color} being the semantic name. For example, ?-blue will highlight the element with a blue color.

Demo: https://play.tailwindcss.com/fXhD65EpG4?layout=horizontal

Customizing

Here's an example of how you can customize the plugin with the available configuration options and their defaults.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("tailwindcss-question-mark")({
      animationDuration: "0.6s",
      enableAnimation: true,
      highlightColorStart: "#f16bc9",
      highlightColorEnd: "#f71fb6",
      widthStart: "8px",
      widthEnd: "12px",
    }),
    // ...
  ],
};

Demo with customization: https://play.tailwindcss.com/4Y4TsxcrNU?file=config