tailwindに独自のcssを追加出来るみたいなのですがどのように追加して良いか分からないです。下記のcssをpluginsに追加したいです。
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
下記のconfigファイルに::webkit
をどのように書いて良いか分からない。
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
const newUtilities = {
'.skew-10deg': {
transform: 'skewY(-10deg)',
},
'.skew-15deg': {
transform: 'skewY(-15deg)',
},
}
addUtilities(newUtilities)
})
]
}
下記の質問を参考にしたのですが、 ::webkit
をどう書いて良いか分からなくて詰まってしまいました。
How to create scrollable element in Tailwind without a scrollbar
.scrollbar-none
クラスで行えると思います。もし.scrollbar-none
だけでは要件を満たせない場合は、コードも単純なため、一度当該リポジトリの.scrollbar-none
に関連するソースコードを読んでみると良いと思います。