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-markThen 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