Personalización y configuración

Resumen

¿Cómo personalizar y configurar tu ambiente en Vim?

Personalizar y optimizar tu ambiente de Vim puede ser la clave para una experiencia de edición de código más eficiente y ajustada a tus necesidades. Con una correcta configuración, podrás extender las funcionalidades predeterminadas y crear un entorno de trabajo cómodo y potente.

¿Cómo acceder al archivo de configuración?

Para comenzar a personalizar Vim, primero debes acceder a su archivo de configuración. Puedes encontrarlo explorando la documentación de Vim y buscando el apartado de configuración. Aquí encontrarás todas las instrucciones necesarias.

¿Cómo entender y navegar por el archivo?

Dentro del archivo de configuración, verás que tienes valores predeterminados. Este archivo suele estar en blanco y está diseñado para que puedas extender las capacidades del editor. Aquí es donde puedes empezar a implementar cambios.

¿Cómo reemplazar y agregar funcionalidades?

Supongamos que deseas modificar la tipografía predeterminada. Puedes copiar y pegar el código correspondiente para reemplazar la configuración predeterminada.

set guifont=NameOfYourFont:h12

Al hacer esto, estás personalizando la tipografía según tus preferencias.

¿Cómo extender la funcionalidad predeterminada?

Si lo tuyo es aumentar las capacidades de Vim, necesitas agregar valores nuevos dentro de etiquetas específicas de extensiones. Por ejemplo:

colorscheme desert

Este código te permite agregar un esquema de color diferente al que viene por defecto.

Futuras personalizaciones: ¿Qué más puedes hacer?

La personalización de Vim no se detiene en el aspecto visual. En futuras lecciones explorarás cómo trabajar con:

Tipografías: para ajustar la claridad y estética del texto.
Colores: mejorando la interfaz visual para que sea más intuitiva.
Tamaños: ajustando el tamaño de las letras y elementos.

Además, conceptos avanzados como Display, Flexbox y otros aspectos del diseño pueden ser personalizables para optimizar tu flujo de trabajo.

Preparándote para proyectos más grandes

Una vez que domines estos conceptos básicos de personalización de Vim, estarás listo para enfrentar proyectos más complejos, como el desarrollo del "Platzi footer". Esto requiere una comprensión sólida de los elementos de diseño y configuración que construirán un sistema robusto y eficiente.

¡Sigue aprendiendo! El conocimiento de estos conceptos será esencial para cualquier futuro proyecto o implementación que desees realizar con Vim. Guarda siempre la confianza en tus habilidades y sigue explorando las opciones que te ofrece este poderoso editor.

Emmanuel Rodríguez

student•

Configuración

Ya que Tailwind es un framework para construir UI a la medida, por default, se tiene un archivo opcional llamado tailwind.config.js en la raíz de la carpeta, donde está el package.json.

Creando un archivo de configuración

Para generar un archivo de configuración para Tailwind, podemos usar el Tailwind CLI:

npx tailwind init

Nota. Podemos utilizar esta herramienta cuando instalamos la dependencia via npm. Donde como resultado tendremos tailwind.config.js:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Cabe mencionar que cada sección, del archivo de configuración, es opcional.

La sección Theme

Esta sección es donde definimos los aspectos relacionados con el diseño visual de nuestro sitio.

...
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
...

La sección Variants

Esta sección nos permite controlar el comportamiento de las utilidades core, como responsive variants y pseudo-class variants.

...
  variants: {
    appearance: ['responsive'],
    // ...
    borderColor: ['responsive', 'hover', 'focus'],
    // ...
    outline: ['responsive', 'focus'],
    // ...
    zIndex: ['responsive'],
  },
...

La sección Plugins

Esta sección nos permite registrar plugins de terceros con el objetivo de extender utilidades, componentes, estilos, etc.

...
  plugins: [
    require('tailwindcss-transforms'),
    require('tailwindcss-transitions'),
    require('tailwindcss-border-gradients'),
  ],
...

Camilo Ernesto Hurtado Cataño

student•

Muchas gracias por este aporte

Jimmy Buriticá Londoño

student•

👍

Javier Romero

student•

para que no sufran con la configuración del archivo tailwind.config.js les recomiendo que en la terminal escriban este comando para que les genere un archivo totalmente completo

npx tailwindcss init tailwind.config.full.js --full

con ese comando se ahorran mucho con la configuración, espero les haya servido amigos/as

Juan Daniel Diaz Jaramillo

student•

Mi pregunta es, es configuración la corto y la pego en este documento que muestra el profesor?

Fernando Andres Muñoz Suazo

student•

Estos son mis apuntes de esta clase:

2.1 Personalización y configuración

https://tailwindcss.com/docs/configuration/#app

tailwind.config.js
En este archivo podemos personalizar parámetros de estilos de nuestro proyecto como ser fontFamily, agregar más colores de los que tailwind trae por defecto.

En theme, podemos configurar por ejemplo el tipo de letra.
En extend podemos añadir cosas extras a tailwind, como colores.

Alexis Toro Navarro

student•

Tube algunos problemas así que lo compartiré

Actualizar node y npm para no tener problemas de compilación
Al instalar postcss se debe colocar como "postcss-cli"
Un tutorial así bien cool que me encontré

Roque Llano

student•

Me ayudó mucho este tutorial, gracias

Abner Batz

student•

En esta clase aprendí a personalizar y configurar ambiente de Tailwind CSS

Jose Morales Varon

student•

Se pueden hacer dos cosas con el archivo de configuración de Tailwind, que son : //Reemplazar la configuración por defecto //Aumentar la funcionalidad agregando 'elementos ' extras

Platzi Team

student•

Vaya si entendí bien esta clase, en el archivo tailwind.config.js podemos modificar agregar algunos valores que ya vienen por defecto como en cualquier otro framework. Es la primera vez que veo algo así es decir en materialize o Boostrap desconozco si tiene la misma opción :o

Remix Zapata

student•

Personalización y configuración

Dentro del archivo tailwind.config.js puedes personalizar la configuración

1. Theme

Es donde define la paleta de colores, la escala de tipos, las fuentes, los puntos de interrupción, los valores del radio del borde y más de su proyecto.

1.1 screens

screens permite personalizar los breakpoints responsivos de tu proyecto

module.exports = {
theme: {
  screens: {
    'sm': '640px',
    // => @media (min-width: 640px) { ... }
    
    'md': '768px',
    // => @media (min-width: 768px) { ... }
    
    'lg': '1024px',
    // => @media (min-width: 1024px) { ... }
    
    'xl': '1280px',
    // => @media (min-width: 1280px) { ... }
    
    '2xl': '1536px',
    // => @media (min-width: 1536px) { ... }
  }
}

1.2 Colors

colors permite personalizar la paleta de colores global para su proyecto.

module.exports = {
theme: {
  colors: {
    transparent: 'transparent',
    black: '#000',
    white: '#fff',
    gray: {
      100: '#f7fafc',
      // ...
      900: '#1a202c',
    },

    // ...
  }
}

1.3 Spacing

spacing permite personalizar el espaciado global y la escala de tamaño para su proyecto

module.exports = {
theme: {
  spacing: {
    px: '1px',
    0: '0',
    0.5: '0.125rem',
    1: '0.25rem',
    1.5: '0.375rem',
    2: '0.5rem',
    2.5: '0.625rem',
    3: '0.75rem',
    3.5: '0.875rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',
  }
}

keyword extend

extend Se usa para agregar valores, sin eliminar los que vienen por default

module.exports = {
theme: {
  extend: {
    // agrega un nuevo breakpoint además de los brakepoints predeterminados 
    screens: {
      '3xl': '1600px',
    }
  }
}

Marco Antonio Alducin Garcia

student•

es muy buen dato, aunque si me seria un poco dificil adaptarme a ello.

Juan Gui Arenas

student•

El archivo de tailwind.config.js es donde personalizamos a nuestro antojo el framework :O que interesante

Naldo Duran

student•

Gonzalo Pimentel

student•

Mmmm por lo que voy entendiendo, en el file de tailwind.config.js personalizamos el framework, interesante!

Carlos Eduardo Diaz Polanco

student•

Teresa Carbajal Herrera

student•

Config File tailwind.config.js: In documentation tailwind. Add Tailwind to your CSS.

https://tailwindcss.com/docs/installation you can search the work config in the documentation.

Is for change config for example in this case fontFamily and extend

In file tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
    }
  },
  variants: {},
  plugins: [],
}

Ruben Garcia

student•

En su configuración podemos:

Reemplazar valores por defecto
Extender su funcionalidad agregando valores