主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ
書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。
2021/04/09
私は 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"],
},
},
};
簡単ですね。ではでは。
参考 :