【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.