ngx-ui-dashboard-tailwind

Esta es una librería de Angular que incluye configuración y estilos específicos usando Tailwind CSS y otros complementos. A continuación, se detallan las dependencias necesarias, la configuración requerida y ejemplos de uso.

Dependencias

Asegúrate de instalar las siguientes dependencias en tu proyecto Angular:

{
  "@tailwindcss/aspect-ratio": "^0.4.2",
  "@tailwindcss/forms": "^0.5.7",
  "@tailwindcss/typography": "^0.5.13",
  "angular-svg-icon": "^18.0.0",
  "flowbite": "^2.3.0",
  "tailwind-scrollbar": "^3.1.0",
  "tailwindcss": "^3.4.4"
}

Instalación

Para instalar estas dependencias, ejecuta el siguiente comando en tu terminal:

    npm install ngx-ui-dashboard-tailwind
    npm install @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography angular-svg-icon flowbite tailwind-scrollbar tailwindcss

Configuración

Tailwind CSS

En tu archivo tailwind.config.js, añade la siguiente configuración:

module.exports = {
  prefix: '',
  mode: 'jit',
  important: false,
  content: [
        './src/**/*.{html,ts}',
    './node_modules/ngx-ui-dashboard-tailwind/**/*'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        'fade-in-down': {
          '0%': {
            opacity: '0',
            transform: 'translateY(-10px)',
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)',
          },
        },
        'fade-out-down': {
          from: {
            opacity: '1',
            transform: 'translateY(0px)',
          },
          to: {
            opacity: '0',
            transform: 'translateY(10px)',
          },
        },
        'fade-in-up': {
          '0%': {
            opacity: '0',
            transform: 'translateY(10px)',
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)',
          },
        },
        'fade-out-up': {
          from: {
            opacity: '1',
            transform: 'translateY(0px)',
          },
          to: {
            opacity: '0',
            transform: 'translateY(10px)',
          },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        'fade-in-down': 'fade-in-down 0.3s ease-out',
        'fade-out-down': 'fade-out-down 0.3s ease-out',
        'fade-in-up': 'fade-in-up 0.3s ease-out',
        'fade-out-up': 'fade-out-up 0.3s ease-out',
      },
      boxShadow: {
        custom: '0px 0px 50px 0px rgb(82 63 105 / 15%)',
      },
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        }
      },
    },
    fontFamily: {
      poppins: ['Poppins', 'system-ui', 'sans-serif'],
      nunito: ['Nunito Sans', 'sans-serif'],
    },
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
  variants: {
    extend: {},
    scrollbar: ['dark', 'rounded'],
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwind-scrollbar'),
    require('flowbite/plugin')
  ],
}

Estilos Globales

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 210 40% 96%;
    --card-foreground: 240 0% 0%;
    --primary: 347 77% 50%;
    --primary-foreground: 0 0% 100%;
    --muted: 213 27% 84%;
    --muted-foreground: 215 16% 47%;
    --destructive: 350 100% 40%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 32% 91%;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 95%;
    --card: 0 0% 7%;
    --card-foreground: 0 0% 14.9%;
    --primary: 347 77% 50%;
    --primary-foreground: 0 0% 100%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --destructive: 350 100% 40%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
  }
}

@layer components {
  .dropdown-content {
    @apply pointer-events-none scale-95 opacity-0 duration-100 ease-in;
  }

  .dropdown:hover > .dropdown-content {
    @apply pointer-events-auto block scale-100 animate-fade-in-up opacity-100 duration-200;
  }
}

.is__invalid-input {
  border-color: #e11d48;
}

.is__invalid-error {
  color: #e11d48;
  @apply px-1 pt-1 text-xs;
}

.z-100 {
  z-index: 100;
}

.border-foreground {
  border-color: hsl(var(--muted-foreground) / 0.5);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

<body class="bg-background font-poppins selection:bg-primary selection:text-primary-foreground">
  <app-root></app-root>
</body>

    import { provideAngularSvgIcon } from 'angular-svg-icon';
    import { provideAnimations } from '@angular/platform-browser/animations';

    provideAngularSvgIcon(),
    provideHttpClient(),
    provideAnimations(),

Ejemplos de uso

import { AuthComponent, LayoutComponent, SignInComponent, SignUpComponent } from 'ngx-ui-dashboard-tailwind';
import { UsersComponent } from './pages/users/users.component';

export const routes: Routes = [
    {
        path: "auth", component: AuthComponent, pathMatch: "prefix", data: {pathImg: './assets/images/auth-screens.png'}, children: [
            { title: "Inicio de sesión", path: "sign-in", component: SignInComponent, pathMatch: "full", data: {url: "http:/localhost:3000/"} },
            { title: "Crear cuenta", path: "sign-up", component: SignUpComponent, pathMatch: "full", data: {url: "http:/localhost:3000/"}  },
            { path: "**", redirectTo: "sign-in", pathMatch: "prefix" }
        ]
    },
    {
        path: "layout", component: LayoutComponent, pathMatch: "prefix", children: [
           {path: 'users', component: UsersComponent}
        ]
    },
    { path: "", redirectTo: "auth/sign-in", pathMatch: "prefix" }
];