How to share CSS styles between LWC components

You can reuse CSS styles between components.

Imagine that you want to build an internal CSS library or every component that you expose on the Experience Cloud site must reuse similar styling.

How to do that? Create an LWC Component with a .css style definition, without html template and javascript script. The structure should look like this:

sharedStyles sharedStyles.css sharedStyles.js-meta.xml

Define your reusable styles in the .css file

.reusable-card {
    display: flex;
    align-items: center;
    color: #747474;

    --slds-c-button-neutral-color-border: #99a9be;
    --slds-c-button-neutral-color-border-active: #5a9e3a;

    /*other styles, vars, design tokens overrides*/
}

You can import them in other LWC’s styling definition .css file

@import 'c/sharedStyles';

/* regular component styling */
.not-reusable__styling {
    color: #747474;
}