gavinjoyce/tailwindcss-question-mark

Adds a helpful ❓ dev time utility class

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.

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

tailwindcss-question-mark's Issues

Demo is failing.

demo link:- https://play.tailwindcss.com/5a9dYkfqd4

Not Working in Just-in-Time Mode

I love this little utility - thank you so much for publishing it!

I noticed this utility does not function when tailwindcss is put in JiT mode which is currently in preview. I haven't looked into the root cause, but I thought I'd leave a note.

Seems its not working in a nextjs project

Hi, I followed the instruction, added it to the plugin list but it's not showing anything. Is there anything special to do in react/next projects?

replace example GIF

this one gets straight to the point

Update the gif

[Enhancement] Allow the highlight style to be customised