0

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

4
  • FYI: Sass: Parent Selector
    – harry0000
    Commented 2021年4月28日 12:46
  • ※ 回答する時間がないので、参考リンクと簡単な説明だけで失礼します。/ 行いたいことと同等の処理はScrollbar Plugin for Tailwind CSS.scrollbar-none クラスで行えると思います。もし .scrollbar-none だけでは要件を満たせない場合は、コードも単純なため、一度当該リポジトリの .scrollbar-none に関連するソースコードを読んでみると良いと思います。
    – supa
    Commented 2021年4月28日 20:53
  • ありがとうございます。上記のサンプルコード等を参考にやってみます。
    – wataru
    Commented 2021年4月28日 23:18

1 件の回答 1

1

こんな感じに追加する事で上手く出来ました。

const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      blue: {
        light: '#b9d7ea',
        DEFAULT: '#769fcd',
        dark: '#112d4e',
      },
      earth: {
        light: '#f9f7f7',
        DEFAULT: '#BDBDBD',
        dark: '#757575',
      },
      gray: {
        dark: '#212121',
        DEFAULT: '#d6e6f2',
        light: '#f7fbfc'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".disable-scrollbars": {
          scrollbarWidth: "none",
          "-ms-overflow-style": "none",
          "&::-webkit-scrollbar": {
            width: "0px",
            background: "transparent",
            display: "none"
          },
          "& *::-webkit-scrollbar": {
            width: "0px",
            background: "transparent",
            display: "none"
          },
          "& *": {
            scrollbarWidth: "none",
            "-ms-overflow-style": "none"
          }
        }
      };
      addUtilities(newUtilities);
    })
  ],
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。