Add CraftCMS Control Panel styling to your module / plugin

Keep your plugin / module UI consistent with the CraftCMS Control Panel using the official sass mixins.

The CraftCMS Control Panel uses a set sass mixins to keep styling consistent. Mixins include:

• Colour variables
• RTL support for borders, padding, text alignment
• Input styles
• Menu styles
• Readable text

To use the mixins you'll need to build your plugin / module asset bundle with a build tool like webpack or vite that supports scss imports.

My last post shows you how to setup Webpack to build asset bundles.

Install the package in your asset bundle package.json:

npm i @craftcms/sass --save-dev

Import the @craftcms/sass mixins into your .scss file.

@import "@craftcms/sass/mixins";

Use the mixins in your custom classes:

.my-custom-input {
  @include input-styles;
}

Side Note #

The @craftcms/sass package is updated as part of the craftcms/cms Github repository and published with Lerna.