Styling doesn't work out of the box

[nathanbabcock]

I noticed some aspects of the styling are inherited from the demo site, including global resets and other custom selectors, that aren't included in style.css in the npm package.

I imported the default styles with this statement in my Solid component:

import '@thisbeyond/solid-select/style.css'

I double-checked the styles panel in Devtools to confirm that style definitions are actually being applied to elements like .solid-select-control and others (they are).

This is what the component looks like in my app as a starting point:

Some tweaking is to be expected of course, especially since my app is dark mode. But it is also missing borders and background colors.

Borders

Border definitions are dependent on this global reset that is included on the demo site, but not the style package:

*,:before,:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

Since I don't have an implicit border-style: solid on every element, none of the border styles get applied.

Backgrounds

Background color is defined by this statement that is only included in the demo site:

.children\:bg-white > * {
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity));
}

To be honest I don't even fully understand what this selector means. It looks like a pseudo-element, but it's escaped with a backslash. In any case, it's not included in @thisbeyond/solid-select/style.css, which instead sets background: transparent.

Other

I just realized what the problem is, maybe. I assume these --tw-* variables are referring to Tailwind. My app doesn't use it, and the Readme never mentioned it. Do I need to use Tailwind to style this component correctly?

I apologize if this is intended behavior, or if I'm misunderstanding something about how the styles should be imported. I just found it difficult to use or even to understand what is causing the default styling.

[martinpengellyphillips]

Hmmm, yeah I tried to find a middle ground here between out of the box utility styling and ability to customise easily.

The intent is you should be able to import the styles as you were doing to get basic useful styles applied (without any tailwind etc). From your debugging (thanks for the detail!) it does look like I'm not accounting for some styles in the built style css - I'll look at fixing that.

[nathanbabcock]

That's awesome, ty for the quick reply. I was able to customize the styles pretty easily once I followed the "Styling" demo on the site.

[martinpengellyphillips]

Release 0.15.0 has now been published which should address this.