![Github](https://img.shields.io/github/v/release/holygrail3/holygrail?logo=HolygrailCSS)
[![npm](https://img.shields.io/npm/v/holygrail3.svg)](https://www.npmjs.com/package/holygrail3)


<p align="center">
  <a href="https://holyguide.es">
    <img width="200" src="https://res.cloudinary.com/manuel-ruiz/image/upload/v1576145416/holygrail/logoholy.svg" alt="Holygrail logo">
  </a>
</p>

<h1 align="center">Holygrail3</h1>

<div align="center">

Una librería ligera de componentes HTML y SCSS optimizada para **Tailwind CSS**.

[![npm package](https://img.shields.io/npm/v/holygrail3.svg?style=flat-square)](https://www.npmjs.com/package/holygrail3)
[![Descargas](https://img.shields.io/npm/dt/holygrail3.svg?style=flat-square)](https://www.npmjs.com/package/holygrail3)

</div>

## ✨ Características

- 🌈 **Optimización para Tailwind CSS**: trabaja conjuntamente sin conflictos.
- 📦 Componentes SCSS diseñados para complementar la utilidad de Tailwind.
- 🛡 Modularidad: incluye solo lo necesario para escalar tus proyectos.
- 🎨 Fácil personalización y soporte para temas RTL.

## 📦 Instalación

```bash
npm install holygrail3

yarn add holygrail3
```

📋 Contenido
holygrail3 incluye los siguientes módulos SCSS:

```css


@import 'abstract/reset';
@import 'abstract/all';
@import 'base/grid';
@import 'base/ratios';
@import 'base/types';
@import 'base/spacing';
@import 'base/colors';
@import 'elements/buttons';
@import 'elements/checkbox';
@import 'elements/form';
@import 'elements/list';
@import 'elements/tabs';
@import 'elements/drawer';
@import 'base/rtl';
```

Cada módulo está diseñado para extender la funcionalidad de Tailwind CSS, agregando estilos predeterminados y componentes reutilizables.

🔨 Uso
Puedes incluir los estilos directamente desde el CDN:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail3@latest/dist/style.css">
```

O importarlos manualmente en tu proyecto SCSS:


Copiar código
```css
@import '~holygrail3/scss/style';
```

🌍 Internacionalización y RTL
holygrail3 soporta temas RTL y la internacionalización es fácil de manejar gracias a su estructura modular.

🔗 Enlaces
Página principal


🤝 Contribuciones
¡Siéntete libre de abrir un issue o enviar un pull request!

<p align="center"> Desarrollado con ❤️ desde Barcelona para el mundo. </p> 






Cada módulo está diseñado para extender la funcionalidad de Tailwind CSS, agregando estilos predeterminados y componentes reutilizables.

🔨 Uso
Puedes incluir los estilos directamente desde el CDN:


```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail3@latest/dist/style.css">
```

O importarlos manualmente en tu proyecto SCSS:


```css
@import '~holygrail3/scss/style';
```

🌍 Internacionalización y RTL
holygrail3 soporta temas RTL y la internacionalización es fácil de manejar gracias a su estructura modular.

🔗 Enlaces
Página principal
🤝 Contribuciones
¡Siéntete libre de abrir un issue o enviar un pull request!

<p align="center"> Desarrollado con ❤️ desde Barcelona para el mundo. </p>