This demonstrates basic Primer Utilities usage.
\n\n","lang":"scss","description":"Demonstrates how to import Primer Utilities via Sass and apply basic spacing, display, and typography classes to an HTML element. The compiled CSS needs to be linked in the HTML."},"warnings":[{"fix":"Migrate your project to use the `@primer/css` package instead of `primer-utilities`. This may involve updating import paths and potentially adjusting to newer class names or architectural changes in `@primer/css`.","message":"The `primer-utilities` npm package is officially deprecated. Its code and active development have been migrated into the larger `@primer/css` monorepo. Developers should transition to using `@primer/css` for active maintenance, updates, and new features.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Consider updating to the actively maintained `@primer/css` package to benefit from ongoing development, bug fixes, and compatibility with modern web standards and tooling.","message":"The standalone `primer-utilities` package has not received updates since version 5.0.0, published in January 2019. It is considered unmaintained, and relying on it for new projects or expecting bug fixes is not advisable.","severity":"deprecated","affected_versions":"5.0.0"},{"fix":"Always extend or override Primer styles using your own SCSS files that import `primer-utilities` first. Define custom classes with higher specificity or use Sass features like `@extend` if available in your version of Sass.","message":"Direct manipulation of `primer-utilities` SCSS files or variables (e.g., overriding in `node_modules`) is highly discouraged. Such modifications are fragile and will break during updates or when migrating to the `@primer/css` monorepo structure.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"If encountering compilation issues, try using an older, compatible version of your Sass compiler or consult the `@primer/css` migration guide for an actively supported setup. Alternatively, consider compiling the `build.css` once and linking it directly.","message":"Due to its age, `primer-utilities@5.0.0` might exhibit compatibility issues with very recent versions of Sass compilers (e.g., Dart Sass) or modern PostCSS plugins, potentially leading to compilation errors or unexpected output.","severity":"gotcha","affected_versions":"5.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `node_modules` is included in your Sass compiler's load paths. For example, with Node-Sass or Dart Sass: `sass --load-path=node_modules styles.scss:styles.css`.","cause":"The Sass compiler cannot locate the `primer-utilities` package within `node_modules` or the specified include paths.","error":"Error: Can't find stylesheet to import. @import \"primer-utilities/index.scss\";"},{"fix":"Verify that your build process successfully compiles your SCSS (including `@import \"primer-utilities/index.scss\";`) into a CSS file, and that this compiled CSS file is correctly linked in your HTML's `` section, e.g., ``.","cause":"The compiled CSS for Primer Utilities is not being loaded or correctly linked in your HTML document.","error":"Primer utility classes (e.g., `m-4`, `p-responsive`) are not applying any styles in the browser."},{"fix":"Carefully increase the specificity of your custom CSS selectors, or ensure your custom stylesheets are loaded *after* Primer Utilities. For critical overrides, consider using a more specific utility class or modifying the component structure, avoiding `!important` where possible.","cause":"Specificity conflict where Primer's utility classes have a higher CSS specificity or appear later in the cascade than your custom styles.","error":"My custom CSS is being overridden by Primer utility classes, even with supposedly higher specificity."}],"ecosystem":"npm"}