3.0.1

Fixed unknown issues whereby somehow the script works on Tailwind Play, but not on my Vue projects.
This release don't use js files generated by TypeScript tsc, and did it manually instead.

3.0.0

Changes:

• Migrated to TypeScript
• Added utilities .scrollbar-none
• Added support for multiple scrollbar themes theme.scrollbar.STYLE_NAME

Upgrade Notes

Browser minimum requirement is now ES2017.
No breaking changes for the configuration in tailwind.config.js.

2.0.4

Fixed bug invalid default value when darkBackground is not defined.

// tailwind.config.js
scrollbar: theme => ({
  DEFAULT: {
    track: {
      background: theme('colors.blue.100'),
    },
    thumb: {
      background: theme('colors.blue.300'),
    },
    hover: {
      background: theme('colors.blue.600'),
    },
  },
}),

// expected behavior as of docs:
theme('scrollbar.DEFAULT.track.darkBackground') === theme('colors.blue.100')

// previous behavior:
theme('scrollbar.DEFAULT.track.darkBackground') === '#f1f1f1' // fallback value when no config are set

If you need the previous default behavior (you use custom color for light theme, and plugin default gray for dark theme)
Set this value in the config

// tailwind.config.js
theme: {
  scrollbar: theme => ({
    DEFAULT: {
      track: {
        background: (your color),
        darkBackground: '#f1f1f1',
      },
      thumb: {
        background: (your color),
        darkBackground: '#c1c1c1',
      },
      hover: {
        background: (your color),
        darkbackground: '#a8a8a8',
      },
    },
  }),
}

2.0.3

Fixed bug invalid default value when darkBackground is not defined

2.0.2

⚠️ BREAKING CHANGES ⚠️

The config structure have changed in v2. Update your config accordingly.

theme: {
  scrollbar: theme => ({
    DEFAULT: {
      size: '10px',
      track: {
        background: theme('colors.gray.50'),
        darkBackground: theme('colors.green.500'),
      },
      thumb: {
        background: theme('colors.gray.300'),
        darkBackground: theme('colors.green.800'),
      },
      hover: {
        background: theme('colors.gray.600'),
        darkBackground: theme('colors.green.700'),
      },
    }
  }),
},

Previously in v1, the config structure is:

DEFAULT: {
  size: theme('spacing.1'),
  colors: {
    track: theme('colors.gray.300'),
    thumb: theme('colors.gray.100'),
    thumbHover: theme('colors.gray.600'),
  }
},

1.0.1

moved tailwindcss to peerDependencies

1.0.0: Merge pull request #2 from gradints/dev

allow configuration from theme in addition to plugin.withOptions

v0.1.0

added live demo to readme