Carnival Styles Config

Configuración extendida para Tailwind CSS con estilos personalizados y fuentes

🚀 Instalación

Paso 1: Instalar la librería

npm install carnival-styles-config

2. Configurar Tailwind CSS en Angular

Si aún no tienes Tailwind CSS configurado en tu proyecto Angular, sigue la guía oficial. Una vez instalado y configurado, modifica el archivo tailwind.config.js de tu proyecto de la siguiente manera:

// tailwind.config.js
const extendedStyles = require('carnival-styles-config');

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: extendedStyles,
  },
  plugins: [],
};

3. Incluir el Archivo styles.css de la Librería

Para que se apliquen los estilos (como la carga de las fuentes), debes incluir el archivo styles.css de la librería en tu proyecto Angular. Tienes dos opciones:

Opción A: Incluirlo en el angular.json

Edita el archivo angular.json y en la sección "styles" agrega la ruta al archivo CSS de la librería:

{
  ...
  "projects": {
    "tu-proyecto": {
      ...
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/carnival-styles-config/styles.css"
            ],
            ...
          }
        }
      }
    }
  }
}

Opción B: Importarlo en tu src/styles.css

Si prefieres tener un solo punto de entrada para los estilos, en tu archivo src/styles.css (o SCSS) agrega la siguiente línea al inicio:

@import 'carnival-styles-config/styles.css';

4. Configurar la Carga de Assets (Fuentes)

Para que Angular copie correctamente los archivos de fuentes desde la librería, debes indicarle que incluya la carpeta de assets de la librería. Edita angular.json y en la sección "assets" agrega una entrada similar a:

{
  ...
  "projects": {
    "tu-proyecto": {
      ...
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/carnival-styles-config/assets",
                "output": "/assets/"
              }
            ],
            ...
          }
        }
      }
    }
  }
}