I want to add ::-webkit-scrollbar to the plugins on tailwind.

It seems that I can add my own css to the tailwind, but I don't know how to add it.I would like to add the following css to plugins.

/*Hidescrollbar 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*/
}

I don't know how to write :webkit in the config file below.

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

I referred to the question below, but I didn't know how to write :webkit so I got stuck.
How to create scrollable element in Tailwind without a scrollbar

css postcss

2022-09-30 21:57

1 Answers

I did a great job by adding it like this.

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

2022-09-30 21:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656