tailwind, css y muchos, comieza en gran mundo de tailwond a un solo paso, muy simple muy facil empieza ya

2. Tailwind
Framework de CSS

3. ÍNDICE
1 Introducción y filosofía
2 Integración en React
3 Clases Utilitarias
4 Trabajo eficiente

4. > Introducción
Tailwind es un framework CSS que proporciona una gran
cantidad de clases utilitarias predefinidas que permiten
diseñar y desarrollar aplicaciones web de manera rápida y
eficiente.
En lugar de definir reglas de estilo personalizadas para cada
elemento, se utilizan clases CSS que representan
propiedades de estilo comunes, como el tamaño, la
tipografía, el color y la posición.

5. > Filosofía de diseño
La filosofía de diseño de Tailwind se basa en la idea de que
los diseñadores y desarrolladores web deben centrarse en
construir interfaces de usuario funcionales y eficientes en
lugar de preocuparse por los detalles de estilo.
Con Tailwind, los desarrolladores pueden enfocarse en la
estructura y funcionalidad del sitio web mientras utilizan
clases utilitarias para aplicar estilos de manera coherente.

6. > Filosofía de diseño
Además, Tailwind fomenta el diseño responsivo al
proporcionar clases utilitarias para ajustar el tamaño y la
posición de los elementos en función del tamaño de la
pantalla.
También fomenta la accesibilidad al incluir clases para
mejorar la legibilidad y la navegación del sitio web para
personas con discapacidades visuales o de movilidad.

7. > Filosofía de diseño
En resumen, la filosofía de diseño de Tailwind se centra en:
● la simplicidad
● la eficiencia
● la accesibilidad
Esto permite a los desarrolladores crear aplicaciones web
de alta calidad y con una apariencia consistente en poco
tiempo.

8. > Integración en React
Ingresamos a la web oficial de Tailwind y damos en el botón
“Get Started” marcado. https://tailwindcss.com/

9. > Integración en React
A la instalación convencional le agregamos dos módulos más:
PostCSS para aplicar un plugin que optimiza los estilos (elimina estilos
no utilizados y reduce el tamaño del archivo CSS generado).
autoprefixer para agregar automáticamente los prefijos CSS
necesarios a nuestras reglas de estilo. Los prefijos son un conjunto de
caracteres que se agregan al principio de las propiedades CSS para
garantizar que funcionen correctamente en diferentes navegadores
web.
npm install -D tailwindcss postcss autoprefixer

10. > Integración en React
Luego inicializamos tailwind y configuramos dos archivos:
➔ el tailwind.config.js que se creó en la carpeta raíz de la app de React.
➔ el archivo css principal de la app
Es importante saber que cuando se configura Tailwind en un proyecto, es
necesario indicar qué archivos de plantilla se utilizarán para generar el HTML
de la página web.
npx tailwindcss init -p

11. > Integración en React
Al especificar las rutas de estos archivos de componente, Tailwind
puede generar los estilos necesarios para cada elemento HTML
que se encuentra en ellos.
Para agregar las rutas de los archivos de componente al archivo de
configuración, se debe agregar una propiedad llamada purge en el
objeto de configuración de Tailwind CSS, la cual debe incluir un
arreglo con las rutas de los archivos de plantilla.

12. > Integración en React
El archivo tailwind.config.js debería quedar así:
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
purge: [
'./src/**/*.{js,jsx,ts,tsx}'
],
theme: {
extend: {}
},
variants: {},
plugins: []
}

13. > Integración en React
Con estas 3 directivas en el css principal (index.css) se podrán
utilizar las clases de Tailwind en el proyecto y personalizarlas según
sea necesario.
@tailwind base: agrega los estilos base de Tailwind
@tailwind components: agrega los estilos predefinidos de los
componentes de Tailwind, como botones, tarjetas, menús
desplegables, etc.
@tailwind utilities: agrega los estilos de utilidad de Tailwind, que son
pequeñas clases para el fondo, margen, padding, tamaño de
fuente, posición, etc.
@tailwind base;
@tailwind components;
@tailwind utilities;

14. > Clases utilitarias
Para modificar el tamaño del texto:
text-xs 0.75rem
text-sm 0.875rem
text-base 1rem
text-lg 1.125rem
text-xl 1.25rem
text-2xl 1.5rem
…
…
text-9xl 8rem
https://tailwindcss.com/docs/font-size

15. > Clases utilitarias
Para modificar el espesor de las letras del
texto:
font-thin 100
font-extralight 200
font-light 300
font-normal 400
font-medium 500
font-semibold 600
font-bold 700
font-extrabold 800
font-black 900
https://tailwindcss.com/docs/font-weight

16. > Clases utilitarias
Para modificar el color del texto:
text-white blanca
text-gray-50 gris con
tonalidad 50
text-red-100 roja con tonalidad 100
text-orange-200 naranja con tonalidad
200
text-yellow-300 amarilla con tonalidad
300
text-green-400 verde con tonalidad 400
text-cyan-500 celeste con tonalidad
500
text-blue-600 azul con tonalidad 600
text-violet-700 violeta con tonalidad 700
las tonalidades van desde 50 hasta 950

17. > Clases utilitarias
Para modificar la alineación del texto:
text-left a la izquierda
text-center centrado
text-right a la derecha
text-justify justificado
https://tailwindcss.com/docs/text-align

18. > Clases utilitarias
Para modificar el ancho de una etiqueta se usa la clase w-
seguido palabras o números/fracciones:
w-full 100%
w-screen 100vw
w-px 1px
w-0.5 0.125rem
w-96 24rem
w-1/12 8.33%
w-3/5 60%
los números los usamos para medidas específicas las fracciones
se usan para porcentajes
https://tailwindcss.com/docs/width

19. > Clases utilitarias
Para modificar el ancho de una etiqueta se usa la clase h-
seguido palabras o números/fracciones:
h-min min-content
h-max max-content
h-fit fit-content
h-px 1px
h-0.5 0.125rem
h-3/5 60%
h- acepta los mismos rangos numéricos /fraccionarios y las
mismas palabras que w-
https://tailwindcss.com/docs/height

20. > Clases utilitarias
Para modificar el color de fondo de una etiqueta:
bg-white blanca
bg-gray-50 gris con
tonalidad 50
bg-red-100 roja con tonalidad 100
bg-orange-200 naranja con tonalidad
200
bg-yellow-300 amarilla con tonalidad
300
bg-green-400 verde con tonalidad 400
bg-cyan-500 celeste con tonalidad
500
bg-blue-600 azul con tonalidad 600
bg-violet-700 violeta con tonalidad 700
las tonalidades van desde 50 hasta 950

21. > Clases utilitarias
Para modificar el margin de una etiqueta:
m-0 0px
mx-0 0px en izquierda/derecha
my-0 0px arriba/abajo
mt-0 0px arriba
mr-px 1px a la derecha
mb-1 0.25rem abajo
ml-48 12rem a la izquierda
ms-60 15rem en linea al inicio
me-96 24rem en linea al final
ver los rangos en la documentación oficial
https://tailwindcss.com/docs/margin

22. > Clases utilitarias
Para modificar el padding de una etiqueta:
p-0 0px
px-0 0px en
izquierda/derecha
py-0 0px arriba/abajo
pt-0 0px arriba
pr-px 1px a la derecha
pb-1 0.25rem abajo
pl-48 12rem a la izquierda
ps-60 15rem en linea al inicio
pe-96 24rem en linea al final
ver los rangos en la documentación oficial
https://tailwindcss.com/docs/paddingm/docs/padding

23. > Clases utilitarias
Para modificar propiedades de display:
block en bloque
inline en línea
inline-block en línea con props de
bloque
flex flex
grid grilla
hidden none
https://tailwindcss.com/docs/display#flex

24. > Clases utilitarias
Por defecto, las imágenes tienen la propiedad object-fit:
contain
Para modificar propiedades de imágenes:
object-contain object-fit: contain
object-cover object-fit: cover
object-fill object-fit: fill
object-none object-fit: none
https://tailwindcss.com/docs/object-fit

25. > Clases utilitarias
Para modificar propiedades flex:
flex-row en fila
flex-col en columna
grow flex-grow: 1
flex-wrap flex-wrap: wrap
justify-between alineación eje princ “entre”
justify-around alineación eje princ “alrededor”
justify-evenly alineación eje princ
“iguales”
items-start alineación eje sec al inicio
items-end alineación eje sec al final
items-center alineación eje sec
centrado
la documentación tiene un apartado para cada prop

26. > Clases utilitarias: ejemplo

27. > Clases utilitarias: ejemplo

28. > Eficiencia
Consejos y trucos para trabajar eficientemente con Tailwind:
● Conoce la documentación: es muy completa y está bien
organizada, por lo que te recomendamos leerla y consultarla
siempre que tengas dudas o necesites inspiración para
diseñar.
● Usa la extensión de VSC: instala "Tailwind CSS IntelliSense"
para obtener sugerencias de autocompletado mientras
escribes tus clases de Tailwind.

29. > Eficiencia
Consejos y trucos para trabajar eficientemente con Tailwind:
● Usa prefijos: si tienes una clase personalizada que entra en
conflicto con una clase de Tailwind, puedes usar un prefijo
para evitar conflictos. Por ejemplo, en lugar de utilizar la clase
"button", puedes utilizar "my-button".
● Utiliza el archivo de configuración: ya que es muy poderoso y
te permite personalizar todo tipo de aspectos del framework.
Tómate el tiempo de revisarlo y ajustarlo según tus
necesidades.

30. > Eficiencia
Consejos y trucos para trabajar eficientemente con Tailwind:
● Usa clases compuestas: podés combinar clases para crear
nuevas clases compuestas. Por ejemplo, si quieres aplicar un
color y un tamaño de fuente personalizados, puedes crear la
clase compuesta "text-custom-color text-custom-font-size".
● Usa utilidades de diseño en lugar de clases personalizadas:
para lograr el mismo efecto de una manera más sencilla y
eficiente.

31. > Eficiencia
Consejos y trucos para trabajar eficientemente con Tailwind:
● Utiliza clases responsivas: para que puedas aplicar diferentes
estilos según el tamaño de la pantalla. Aprende a utilizarlas
para que tus diseños se vean bien en cualquier dispositivo.
Estos son solo algunos consejos y trucos para trabajar de manera
eficiente con Tailwind.
Recuerda que la práctica hace al maestro, así que sigue
experimentando y aprendiendo a medida que trabajas con
Tailwind.