@tinsoft-cor/ui-admin-next

v0.0.7

Published

a month ago

Este paquete exporta componentes de interfaz y también incluye estilos globales precompilados con Tailwind CSS.

Downloads

0High
0Medium
0Low

coriot

@tinsoft/ui-admin-next

Este paquete exporta componentes de interfaz y también incluye estilos globales precompilados con Tailwind CSS.

Publicación

El CSS se genera automáticamente durante el build usando PostCSS + Tailwind. El archivo resultante es dist/output.css y se publica junto al código JS/TS. En package.json se establecen:

"style": "dist/output.css",
"sideEffects": ["dist/output.css"]

Esto ayuda a bundlers como Webpack o Vite a detectar el CSS y evitar que sea tree‑shakeado.

Cómo usar en una aplicación Next.js

Instala la librería desde npm (o tu registro):

npm install @tinsoft/ui-admin-next
# o yarn add @tinsoft/ui-admin-next

Importa el CSS global en el entrypoint de la app. Next.js requiere que los estilos globales se importen en pages/_app.tsx (Pages Router) o en app/layout.tsx (App Router).

Pages Router (pages/_app.tsx):

import 'tailwindcss/tailwind.css';
import '@tinsoft/ui-admin-next/dist/output.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

App Router (app/layout.tsx):

import '@tinsoft/ui-admin-next/dist/output.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Nota: Next.js solo permite importar hojas de estilo global desde _app o el layout raíz. Intentar importarlo desde un componente dará error.

(Opcional: Tailwind en el consumidor) Si prefieres recompilar Tailwind en la app en vez de usar el CSS pre‑compilado, añade el paquete a la configuración content de tailwind.config.js:
```
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@tinsoft/ui-admin-next/**/*.{js,ts,jsx,tsx}'
  ],
  // ...otras opciones
};
```
De este modo Tailwind escaneará tus componentes empaquetados y generará únicamente las clases que realmente se usan.

Scripts útiles del paquete

npm run build – compila componentes y genera dist/output.css.
npm run build:css – solo recompila el CSS.
Si instalas la librería desde Git (sin publicar), el script prepare ejecuta build automáticamente para crear dist/output.css.

Ejemplo de `build` interno

Tailwind y PostCSS se invocan mediante:

"build:css": "postcss src/input.css -o dist/output.css",
"build": "npm run build:css && tsup"

Nota sobre Peer Dependencies

Los consumidores deben instalar react, react-dom y next como peer dependencies.

Con esta configuración, cuando otro proyecto Next.js instale @tinsoft/ui-admin-next también obtendrá los estilos automáticamente tras importar el CSS en su entrypoint.#� �u�i�-�a�d�m�i�n�-�n�e�x�t� � �

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme