Integra Solar en tu proyecto

npm install -D tailwindcss@3

// tailwind.config.js
module.exports = {
  presets: [require('./ccs-tailwind-config.js')],
  content: ['./**/*.html'],
};

Ajusta content a las carpetas de tu proyecto.

En producción, Inter y JetBrains Mono van en tu propio servidor, no en Google Fonts, igual que Tailwind compilado y los íconos. Descarga los archivos .woff2 variables (licencia OFL), por ejemplo de los paquetes de npm @fontsource-variable/inter y @fontsource-variable/jetbrains-mono (carpeta files/). Déjalos en /fonts/ y agrega esto al comienzo de input.css, antes de @tailwind:

/* input.css · tipografías de Solar */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
}

Los componentes de Solar usan <iconify-icon>, que en este sitio pide cada ícono a la API de Iconify. En producción, descarga iconify-icon.min.js y solar-iconos.js (los íconos que usa Solar), déjalos en /js/ y cárgalos en el <head>, en este orden. Así el HTML de los componentes funciona tal cual y no se pide nada fuera de tu sitio.

<!-- Solar · íconos alojados -->
<script src="/js/solar-iconos.js"></script>
<script src="/js/iconify-icon.min.js"></script>

Si usas un ícono que no está en solar-iconos.js, no se va a ver. Genera tu propio archivo con generar-solar-iconos.js: busca los íconos en tus .html y .js y copia solo esos.

npm i -D @iconify-json/solar @iconify-json/ph @iconify-json/mingcute @iconify-json/mynaui
node generar-solar-iconos.js ./ > js/solar-iconos.js

El generador busca el nombre completo escrito tal cual. Si armas el nombre en JavaScript (por ejemplo, con una variable), no lo encuentra: escribe esos nombres completos en un comentario del mismo archivo, como // íconos: solar:check-circle-bold solar:close-circle-bold.

Si haces pruebas automáticas con capturas: <iconify-icon> dibuja cada ícono recién cuando entra en pantalla, así que en una captura de página completa los que estaban fuera de vista salen vacíos. A quien usa el sitio no le afecta. Antes de capturar, recorre la página con scroll, o agrega el atributo noobserver a los íconos en la copia de prueba.

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

npx tailwindcss -i input.css -o solar.css --minify

Mientras desarrollas, agrega --watch para que se compile solo cada vez que guardas.