No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Dimensiones y Espacios

8/29
Recursos

Aportes 25

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

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

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

<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

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!

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 ‚Äúbarras‚ÄĚ como parte del nombre de la clase.
No recordaba que CSS sea tan permisivo en el naming de las clases.

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

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

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

Me est√° gustando estoooo

sf