Instrucciones

Para asegurar la consistencia y presición en el desarrollo con ElementumUI, es crucial configurar adecuadamente nuestro entorno de desarrollo. Esto garantiza que los componentes que diseñemos y visualicemos en pantalla sean totalmente idénticos en su implementación final.

La correcta configuración del entorno de desarollo, especialmente en un entorno de Next.js, TypeScript y Tailwind CSS, asegura una experiencia de desarrollo fluida y eficiente.

Con esta configuración inicial, podemos maximizar la calidad y coherencia de nuestros componentes, lo que contribuye a la construcción de aplicaciones robustas y estéticamente coherentes.

  • 1Crear el proyecto

    Comienza creando un nuevo proyecto de Next.js con TypeScript y Tailwind CSS.

    npx create-next-app@latest my-app --typescript --tailwind --eslint

  • 2Tailwind CSS

    Terminal

    npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

    globals.css

    
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @layer base {
    :root {
      --primary: 330 75% 53%;
      --secondary: 0 0% 97%;
      --tertiary: 220 3% 91%;
      --background: 0 0% 100%;
      --background-secondary: 0 0% 97%;
      --background-tertiary: 220 3% 91%;
      --foreground: 0 0% 3.9%;
      --border: 0 0% 92%;
      --muted: 60 4.8% 95.9%;
      --muted-foreground: 25 5.3% 44.7%;
      --success: 142 83% 45%;
      --warning: 45 97% 47%;
      --info: 199 94% 48%;
      --danger: 0 72% 60%;
      --radius: 0.5rem;
    }
  
    .dark {
      --primary: 330 75% 53%;
      --secondary: 0 0% 8%;
      --tertiary: 0 0% 15%;
      --background: 0 0% 3.9%;
      --background-secondary: 0 0% 8%;
      --background-tertiary: 0 0% 15%;
      --foreground: 0 0% 98%;
      --border: 0 0% 10%;
      --muted: 12 6.5% 15.1%;
      --muted-foreground: 24 5.4% 63.9%;
      --success: 142 83% 45%;
      --warning: 45 97% 47%;
      --info: 199 94% 48%;
      --danger: 0 72% 60%;
    }
  }
  
  @layer base {
    body {
      @apply bg-background text-foreground;
    }
  
    i {
      margin-top: 0.25rem;
    }
  
    ::-webkit-scrollbar {
      width: 0;
    }
  }

    tailwind.config.ts

    
  import type { Config } from 'tailwindcss';

  const config: Config = {
    darkMode: 'class',
    content: [
      './pages/**/*.{js,ts,jsx,tsx,mdx}',
      './components/**/*.{js,ts,jsx,tsx,mdx}',
      './app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {
        container: {
          screens: {
            xl: '1200px',
          },
        },
        colors: {
          success: 'hsl(var(--success))',
          warning: 'hsl(var(--warning))',
          info: 'hsl(var(--info))',
          danger: 'hsl(var(--danger))',
          primary: {
            DEFAULT: 'hsl(var(--primary))',
          },
          secondary: {
            DEFAULT: 'hsl(var(--secondary))',
          },
          tertiary: {
            DEFAULT: 'hsl(var(--tertiary))',
          },
          border: 'hsl(var(--border))',
          foreground: 'hsl(var(--foreground))',
          background: {
            DEFAULT: 'hsl(var(--background))',
            secondary: 'hsl(var(--background-secondary))',
            tertiary: 'hsl(var(--background-tertiary))',
          },
          muted: {
            DEFAULT: 'hsl(var(--muted))',
            foreground: 'hsl(var(--muted-foreground))',
          },
        },
        transitionDuration: {
          DEFAULT: '150ms',
        },
        boxShadow: {
          '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        },
        borderRadius: {
          lg: 'var(--radius)',
          md: 'calc(var(--radius) - 2px)',
          sm: 'calc(var(--radius) - 4px)',
        },
        keyframes: {
          fadeIn: { from: { opacity: '0', transform: 'scale(.95)' } },
          fadeOut: { to: { opacity: '0', transform: 'scale(.95)' } },
        },
        animation: {
          fadeIn: 'fadeIn 0.1s ease-out',
          fadeOut: 'fadeOut 0.15s ease-out forwards',
        },
      },
    },
    important: true,
    plugins: [],
  };

  export default config;

  • 3Iconos

    Terminal

    npm install @flaticon/flaticon-uicons

    globals.css

    @import '@flaticon/flaticon-uicons/css/all/all';

  • 4Librerías extras

    Para ciertos componentes es posible que se necesiten librerías adicionales para su correcto funcionamiento.

    Las instrucciones detalladas sobre cómo instalar estas librerías adicionales se proporcionarán en la página de detalle de cada componente.

    De esta manera, garantizamos que los desarrolladores tengan acceso a toda la información necesaria para utilizar los componentes de ElementumUI de manera efectiva y eficiente.