Using the tailwind-scrollbar-hide plugin with Bud / Sage

bud
, ,
1

Hi all,

I try to install and use a plugin tailwind-scrollbar-hide. After adding the plugin via yarn add tailwind-scrollbar-hide, I also added the plugin in tailwind.config.js:

plugins: [
    require("autoprefixer"),
    require("tailwind-scrollbar-hide"),
  ],

After I run the yarn build command, the below error show:

│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (235:13) resources/styles/home.css The `max-mobile:scrollbar-hide` class does not exist. If `max-mobile:scrollbar-hide` is a custom class, make sure it is defined within a `@layer` directive.

Please advise and thanks.

Zen

2

What was the CSS used in home.css?

If you need to create custom classes within the @layer directive, you can do so in your CSS file. Here’s an example:

@layer utilities {
  .max-mobile\:scrollbar-hide {
    @apply scrollbar-hide;
  }
}
3

Thanks for your reply. The css is like this:

 @apply max-mobile:overflow-x-scroll max-mobile:overflow-y-visible max-mobile:scrollbar-hide;

I have tried with simple parcel and it works fine with the same CSS, so only got error when using bud tailwind,

4

Also tried to add this code block to home.css but still have the same error. Thanks.

5

Where did this come from? Is there a reason why you’re doing this? :eyes:

Using require when adding Tailwind plugins isn’t going to work on a Sage 10 setup, you’ll need to use import. A couple recently updated topics that cover this:

6

Thanks for your reply, Ben. I tried to use import and same error message when running yarn build

│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (235:13) resources/styles/home.css The `max-mobile:scrollbar-hide` class does not exist. If `max-mobile:scrollbar-hide` is a custom class, make sure it is defined within a `@layer` directive.

It seems bud does not include the plugin when building the project, so putting the plugin in tailwind.config.js is a proper approach? Any extra steps required? Thanks.

7

I just tried installing and using the plugin based on their README and accounting for using import instead of require.

  1. yarn add tailwind-scrollbar-hide
  2. Modify tailwind.config.js:
import tailwindScrollbarHide from 'tailwind-scrollbar-hide';

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
  },
  plugins: [
    tailwindScrollbarHide,
  ],
};

export default config;
  1. Use the markup from the README:
<div class="w-4 scrollbar-hide">...</div>
<div class="w-4 scrollbar-hide md:scrollbar-default">...</div>

The styles from the plugin are working as expected.

I’m not really understanding what you’re trying to do from your resources/styles/home.css file. Is there a specific reason why you’re using @apply in CSS files instead of using Tailwind classes in template/component files?

Doing this in app.css also works:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .hello {
    @apply scrollbar-hide;
  }
}