@spencerwmiles/tailwind-material-symbols/src/all.css

Tailwind CSS v4 utilities for Google's Material Symbols variable font. Compatible with tailwind-merge.

/**
 * Material Symbols Tailwind CSS v4 Plugin
 * 
 * Provides utilities for Google's Material Symbols variable font.
 * Compatible with tailwind-merge.
 * 
 * This is the complete package that includes all three font variants.
 * For smaller bundle sizes, import specific variants:
 * - @import '@spencerwmiles/tailwind-material-symbols/outlined.css';
 * - @import '@spencerwmiles/tailwind-material-symbols/rounded.css';
 * - @import '@spencerwmiles/tailwind-material-symbols/sharp.css';
 * 
 * Based on Material Symbols by Google, packaged by @marella/material-symbols
 * https://github.com/marella/material-symbols
 * 
 * Material Symbols supports 4 variable font axes:
 * - FILL (0-1): Filled vs outlined (default: filled)
 * - wght (100-700): Font weight  
 * - GRAD (-25 to 200): Grade/emphasis
 * - opsz (20-48): Optical sizing
 */

@import './_base.css';
@import 'material-symbols';

@theme {
  /* Set the active font family to the default (can be overridden by consumers) */
  --font-family-material-symbols: var(--font-family-material-symbols-default);
}

/* ===== VARIANT UTILITIES ===== */
/* These utilities override the default and force a specific variant */

@utility symbol-outlined {
  --font-family-material-symbols: var(--font-family-material-symbols-outlined);
}

@utility symbol-rounded {
  --font-family-material-symbols: var(--font-family-material-symbols-rounded);
}

@utility symbol-sharp {
  --font-family-material-symbols: var(--font-family-material-symbols-sharp);
}