# Tag Cloud as Pills (SCSS)

> Restyles the Tag Cloud widget and block as a tidy row of rounded pills with equal font sizes, which reads better than a jumble of sizes.

- Type: SCSS
- Runs: Site-wide header
- Category: [Widgets](https://wpide.com/library/category/widgets/)
- Tags: scss, tag-cloud, widgets
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/tag-cloud-pills-scss/

## Code

```scss
$accent: #2271b1;

.tagcloud,
.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;

    a {
        display: inline-block;
        padding: 0.3em 0.85em;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 999px;
        font-size: 0.85rem !important;
        line-height: 1.4;
        text-decoration: none;

        &:hover,
        &:focus {
            border-color: $accent;
            background: $accent;
            color: #fff;
        }
    }
}
```

## Notes

Font sizes set by the tag cloud are overridden on purpose.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Tag Cloud as Pills (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/