私は CSS を書きたくないタイプの人間なので、基本的には Bootstrap や TailwindCSS みたいな、
CSS フレームワークを使って Web サイトを構築するタイプの人間です。
ということで、今日はそのうちの TailwindCSS のお話
例えば、 CSS 疑似要素の first-letter
を使いたい場合、
TailwindCSS では標準では用意されていないので、バリアントを追加する、
といった方法で実装することになります。
TailwindCSS でバリアントを追加する方法は下のような感じ
const plugin = require("tailwindcss/plugin"); module.exports = { // 略 plugins: [ plugin(function({addVariant, e}) { addVariant("first-letter", ({modifySelectors, separator}) => { modifySelectors(({className}) => { return `.${e(`first-letter${separator}${className}`)}:first-letter` }) }) }), ], }
ここは基本上みたいな感じにしてあげれば良い。
あとは、使いたいプラグインの所に対して、 extend
で設定を追加してあげれば使えるようになります。
例えば文字色を最初の文字だけ変えたい、みたいな場合は、下記のようにしてあげる。
module.exports = { // 略 variants: { extend: { textColor: ["first-letter"], }, }, };
簡単ですね。ではでは。
参考 :