Dimensiones y Espacios

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 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 “barras” 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