Instalación

Instalar Tailwind CSS

Components are styled using Tailwind CSS. Follow the official installation guide to add it to your project.

Añadir una utility

npm install clsx tailwind-merge

Luego crear un archivo en lib/utils.ts para manejar las clases de TailwindCSS:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs))
}

Algunos componentes necesitan class-variance-authority así que si lo necesita instalelo.

npm install class-variance-authority

Crear un archivo en src/lib/dom-selector.ts:

Si no usa TypeScript solamente cree un archivo dom-selector.js y elimine el tipado.

export const $ = <T extends HTMLElement>(
	selector: string,
	context: Document | HTMLElement = document
) => {
	return context.querySelector<T>(selector)
}

export const $$ = <T extends HTMLElement>(
	selector: string,
	context: Document | HTMLElement = document
) => {
	return context.querySelectorAll<T>(selector)
}

Configurar Alias en el tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
	  "paths": { "@/*": ["src/*"] }
  }
}