How do you setup Tailwind with Histoire?

[alexbjorlig]

I'm trying to setup a project with Tailwind/Svelte.

I get the error Error: Could not parse CSS stylesheet.

In historie.setup.ts I have:

import './src/tailwind.css';

And in the css.file I have the following:

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

@layer utilities {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* https://javascript.plainenglish.io/how-to-create-horizontal-vertical-scroll-shadows-26aa7a7f00a0 */
    .scroll-shadow-y {
        background-image: linear-gradient(to top, white, white),
            linear-gradient(to top, white, white),
            linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
            linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
        background-position: bottom center, top center, bottom center, top center;
        background-color: white;
        background-repeat: no-repeat;
        background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
    }
    .dark .scroll-shadow-y {
        background-image: linear-gradient(to top, rgb(29, 29, 32), rgb(29, 29, 32)),
            linear-gradient(to top, rgb(29, 29, 32), rgb(29, 29, 32)),
            linear-gradient(to top, rgba(200, 200, 200, 0.1), rgba(255, 255, 255, 0)),
            linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(255, 255, 255, 0));
        background-position: bottom center, top center, bottom center, top center;
        background-color: rgb(29, 29, 32);
        background-repeat: no-repeat;
        background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
        background-attachment: local, local, scroll, scroll;
    }

    .avoid-page-break-inside {
        /* According to MDN should work
        https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
        */

        break-inside: avoid;
    }
    @layer responsive {
        /* Chrome, Safari and Opera */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
    }
}

The error comes, when I add the last "responsive" section:

@layer responsive {
        /* Chrome, Safari and Opera */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
    }

What should I do to try and fix this?

[alexbjorlig]

I found the solution for this this. The @layer responsive is actually not a valid css/tailwind configuration... When it's removed, no errors.