Share CSS Style Rules in Lightning Web Components Salesforce | LWC Stack ☁️⚡️

 Do you know you can create a CSS utility kind of file and share the same style, look & feel with all other components as well.

For that you just have to define styles in the CSS module and import the module into the components that you want to share styles.

Please follow steps below-

Step 1: Create a new Lightning Web Component and add a new css file in it. For example my component name is cssUtility.

Step 2: Delete all files from the component except css and meta.xml file. The next output should look like this.

Step 3: Define a style rule in your cssUtility.css class. I am adding opacity to it.

Step 4: In the CSS file of the Lightning Web Component where you want to import above css, you can simply import it like below. In my case I am importing in to my deleteAccounts component's deleteAccounts.css file.
If you do not have any css file in your desired component then create one.

Step 5: Now in the html, in my case it will be deleteAccounts.html you can simply use the references from the cssUtility.css as we have imported it already in deleteAccounts.
You can simply add a class attribute to your tags and use it as shown below.

Output

Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)