No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
20 Hrs
37 Min
38 Seg
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Dimensiones y Espacios

8/29
Recursos

Aportes 26

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Me tom茅 la molestia de hacer la conversi贸n para los que no dominan el tema muy bien como yo

      '0': '0',		= 0px
      '1': '0.25rem',	= 4px
      '2': '0.5rem',	= 0.8px
      '3': '0.75rem',	= 12px
      '4': '1rem',	= 	16px
      '5': '1.25rem',	= 20px
      '6': '1.5rem',	= 24px
      '8': '2rem',	= 	32px
      '10': '2.5rem',	= 40px
      '12': '3rem',	= 48px
      '16': '4rem',	= 64px
      '20': '5rem',	= 80px
      '24': '6rem',	= 96px
      '32': '8rem',	= 336px
      '40': '10rem',	= 640px
      '48': '12rem',	= 768px
      '56': '14rem',	= 896px
      '64': '16rem',	= 1024px

Aqu铆 pueden ver los anchos
https://tailwindcss.com/docs/width

Aqu铆 pueden ver los padding
https://tailwindcss.com/docs/padding

Aqu铆 pueden ver los margin
https://tailwindcss.com/docs/margin

Mi problema con la estandarizaci贸n de espacios se acab贸

Tambi茅n permite el uso de m谩rgenes negativas, aqu铆 el ejemplo:

Fuente: https://tailwindcss.com/docs/margin

1rem = 16px

<h1>3.2 Dimensiones y espacios</h1>

Tailwind utiliza un sistema de espacios que se puede configurar. Se maneja internamente utilizando rem. Se puede visualizar desde el archivo tailwind.config.full.js.

Se puede utilizar en:

  • Height.
  • Width.
  • Margin.
  • Padding.

En las clases de los elementos se a帽aden cosas como:
h-32 w-1/2 pt-2 mx-auto

Para manajear el height:
https://tailwindcss.com/docs/height/#app

Para manejar width en porcentajes se puede ver esta documentaci贸n:
https://tailwindcss.com/docs/width/#app

tailwind es m谩s interesante de lo que parce. por lo menos me va gustando m谩s que boostrap

Est谩 muy interesante esto! .
Nunca pares de aprender

hasta el momento se ve genial tailwind

Cada clase ha sido un 馃く continuo.

Tailwindcss es una maravilla

Parece que la informaci贸n de los estilos va en el mismo html, lo cu谩l no s茅 hasta que punto es algo bueno.

Boom me encanta!

El sistema de espaciado de Tailwind afecta a las propiedades:

  • Height
  • Width
  • Margin
  • Padding

Puedes configurar sus medidas en el archivo tailwind.config.js,

Aqu铆 hay buena informaci贸n al respecto

Nunca hab铆a utilizado Tailwind CSS y es incre铆ble 鉂わ笍

Me recuerda a las utilidades de bootstrap, solo que aqu铆 hay muchas m谩s.

Conociendo ya las propiedades del sistema de espacios vamos a ir a nuestro index.html empezaremos con la altura y el ancho

  • h-8 - modifica altura
  • w-16 - modifica el ancho

Otra forma de cambiar el ancho de nuestros elementos por porcentajes, si vamos los a la documentaci贸n veremos que el porcentaje lo maneja en fracciones entonces tenemos

  • w-1/2 - 50% - toma el 50% del ancho
  • w-1/3 - 33.33333%

Tengo un problema cuando quiero aplicar en un tema un estilo de boxShadow diferente llamado soft鈥 mi configuracion es la siguiente:

module.exports = {
  theme: {
    boxShadow: {
      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      soft: '0 9px 9px 16px rgba(163, 177, 198, 1), 0 -9 -9 16 rgba(163, 177, 198, 1)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
      none: 'none',
    },
  },
  variants: {},
  plugins: [],
}```

Al colocarle la clase shadow-soft el elemento no cambia...

Me parece incre铆ble que se puedan poner 鈥渂arras鈥 como parte del nombre de la clase.
No recordaba que CSS sea tan permisivo en el naming de las clases.

Si que es un buen elemento que me servir谩 de mucho para un proyecto que estoy haciendo.

Vengo de 4 a帽os usando Bootstrap y Tailwind es hermoso, ahora que lo conosco, seguro que lo usare mas

Hasta ahora se ve sencillo de implementar, con clases similares a Bootstrap

  • 1rem = 16px
  • Los porcentajes (%) se manejan con sistema de fracciones

Me est谩 gustando estoooo

sf