# @wordpress/base-styles

> Base SCSS utilities and variables for WordPress.

Latest version **13.1.0** (published 2026-09-10) · GPL-2.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @wordpress/base-styles
pnpm add @wordpress/base-styles
yarn add @wordpress/base-styles
bun add @wordpress/base-styles
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 13.1.0 |
| Published | 2026-09-10 |
| First published | 2019-11-14 |
| Weekly downloads | 0 |
| License | GPL-2.0-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18.12.0 |
| Dependencies | 0 |
| Unpacked size | 109.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11754 |
| Author | The WordPress Contributors |
| Maintainers | garypendergast, adamsilverstein, gziolo, ntwb, riad, noisysocks, kadamwhite, gutenbergplugin, jorgefilipecosta, ellatrix, iandunn206, whyisjake, ockham, sirreal, nosolosw, wpisabel, ntsekouras, nerrad, desrosj, talldanwp, peterwilsoncc, ryanwelcher, mamaduka, aduth, johnbillion |
| Keywords | wordpress, gutenberg, sass, scss, css |

## Links

- npm: https://www.npmjs.com/package/@wordpress/base-styles
- Repository: https://github.com/WordPress/gutenberg
- Homepage: https://github.com/WordPress/gutenberg/tree/HEAD/packages/base-styles/README.md
- Issues: https://github.com/WordPress/gutenberg/issues
- npm.io page: https://npm.io/package/@wordpress/base-styles

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 13.1.0 (latest) — 2026-09-10
- 13.1.1-next.v.202609031004.0 (next) — 2026-09-03
- 6.16.1 (wp-7.0) — 2026-06-30
- 6.9.1 (wp-6.9) — 2025-10-28
- 5.19.1 (wp-6.8) — 2025-03-10
- 5.8.3 (wp-6.7) — 2024-10-21
- 5.0.1 (wp-6.6) — 2024-06-11
- 4.42.5 (wp-6.5) — 2024-03-12
- 4.33.13 (wp-6.4) — 2023-11-13
- 4.26.5 (wp-6.3) — 2023-10-12
- 4.17.4 (wp-6.2) — 2023-10-12
- 4.8.1 (wp-6.1) — 2022-09-20
- 4.3.1 (wp-6.0) — 2022-04-19
- 4.0.4 (wp-5.9) — 2021-11-22
- 3.5.4 (wp-5.8) — 2021-06-29
- … 239 more at https://npm.io/package/@wordpress/base-styles/versions

## README

# Base Styles

Base SCSS utilities and variables for WordPress.

Note: This package requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. When using this package, make sure you are using Sass version 1.23.0 or later, which is based on Dart Sass.

## Installation

Install the module

```bash
npm install @wordpress/base-styles --save-dev
```

## Usage

In your application's SCSS file, include styles like so:

```scss
@use '@wordpress/base-styles/colors';
@use '@wordpress/base-styles/variables';
@use '@wordpress/base-styles/mixins';
@use '@wordpress/base-styles/breakpoints';
@use '@wordpress/base-styles/animations';
@use '@wordpress/base-styles/z-index';
@use '@wordpress/base-styles/default-custom-properties';
```

Make sure to use namespaces when accessing utilities, variables, functions, etc. For example:

```scss
.selector {
	color: colors.$gray-300;

	@include mixins.break-medium() {
		font-size: variables.$font-size-large;
	}
}
```

### CSS Admin Themes

The package also includes a built version of the output generated by the `wordpress-admin-schemes()` mixin which can be used directly in your project. The CSS file is located at `node_modules/@wordpress/base-styles/build-style/admin-schemes.css`.

## Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).

<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

---
_Source: https://npm.io/package/@wordpress/base-styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._