Hey 👋,

I'm the creator of a Tailwind CSS plugin offering utility classes for Google's Material Symbols. These days I got around to updating it to the CSS first approach of Tailwind CSS v4. It still supports v3 through the legacy JS plugins, so maybe it could also serve as an insight into how you could achieve the same.

For a quick intro, what this plugin does, it allows you to use utility classes to style the Material Symbols font.

<span class="icon icon-48 icon-700 dark:icon-dark">star</span>

This example code will result in an icon with a size of 48px and a matching optical size, a 700 stroke weight and recommended grade for dark backgrounds. There is a utility for every variation offered by the symbols.

To use it, install using:

npm i -D @savaryna/tailwindcss-material-symbols

then import it in your main .css file:

@import 'tailwindcss';
@import '@savaryna/tailwindcss-material-symbols';

Alternatively you can also use:

@import '@savaryna/tailwindcss-material-symbols/css';

if your environment does not support the conditional export.

For a full set of what utilities are exposed and how you can use them with other Tailwind CSS features, like transitions and pseudo selectors, check out the demo site and repo.

I'm also interested in how useful people find something like this, so feel free to leave your feedback down below.

To me this is more of a learning experience and I could also write an article on how to approach "plugin" development for v4 if people are interested. (I might just write it anyways)