【Tailwind CSS】「#タグ」を表示するボタン

import type { Config } from "tailwindcss";

const {
  iconsPlugin,
  getIconCollections,
} = require("@egoist/tailwindcss-icons");

const config: Config = {
  plugins: [
    // Here
    iconsPlugin({
      collections: getIconCollections(["tabler"]),
    })
  ],
  darkMode: 'class',
};
export default config;

<span className="i-tabler-tag-filled" />

pnpm add @egoist/tailwindcss-icons
pnpm add -D @iconify/json

<div className='flex'>
  <a>
    <div
      className="transition-colors rounded-s-3xl border-y border-l py-1.5 pl-4 pr-3 group border-blue-400 hover:bg-blue-400 dark:border-violet-500 dark:hover:bg-violet-500"
    >
      <span className='text-blue-500 transition-colors before:mr-1 before:content-["#"] group-hover:text-white dark:text-violet-500 dark:group-hover:text-slate-200'>
        Tailwind CSS
      </span>
    </div>
  </a>
    <button
      className="group flex w-12 items-center justify-center rounded-e-3xl border-y border-e border-blue-400 bg-blue-50 transition-colors dark:border-violet-500 dark:bg-slate-700"
    >
      <div>(アイコン)</div>
    </button>
</div>