

tailwindに独自のcssを追加出来るみたいなのですがどのように追加して良いか分からないです。下記のcssをpluginsに追加したいです。

[code]

    /* 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 */
    }
    
[/code]

下記のconfigファイルに`::webkit`をどのように書いて良いか分からない。

[code]

    // 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)
        })
      ]
    }
    
[/code]

下記の質問を参考にしたのですが、 `::webkit` をどう書いて良いか分からなくて詰まってしまいました。  
[How to create scrollable element in Tailwind without a
scrollbar](https://stackoverflow.com/questions/66416614/how-to-create-
scrollable-element-in-tailwind-without-a-scrollbar)


CC BY-SA 4.0
2021-04-28T07:52:15.327
75554
2021-04-29T00:09:26.070
22565
question
css postcss
tailwindのpluginsに::-webkit-scrollbarを追加したい。


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

[code]

    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);
        })
      ],
    }
    
    
[/code]


CC BY-SA 4.0
2021-04-29T00:09:26.070
75566
2021-04-29T00:09:26.070
22565
75554
answer