【Tailwind CSS】「#タグ」を表示するボタン
ソース
タグのボタンを配置するJSXコンポーネント
<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>というコンポーネントです．
これは，以下の画像のとおりになります．
どんなものか
画像のように表示され，ホバーすると縁の色が背景色となり白文字になる仕様です．また，darkモードにも対応しているのでTailwind CSSの場合はそのまま利用可能です．
アイコンについて
画像内のアイコンは@egoist/tailwindcss-iconsと@iconify/jsonを使っています．
tailwind.config.ts
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;このように，tailwind.config.tsのplugin欄に追加することで利用可能です．getIconCollectionsの string 配列には使用するアイコンのコレクション名を入れてください．そして，呼び出す際は
<span className="i-tabler-tag-filled" />とi-[コレクション名]-[アイコン名]とclassNameに書くだけで配置できます．
必要なパッケージについて
pnpm add @egoist/tailwindcss-icons
pnpm add -D @iconify/jsonメモ
hover:などとは組み合わせできない...? (要検証)
- アイコン切り替え等
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
