Tailwind CSS es un marco CSS de primera utilidad que permite a los desarrolladores diseñar componentes web personalizados sin cambiar a un archivo CSS. En este tutorial, aprenderá cómo instalar Tailwind CSS en React y cómo puede usarlo para crear una página de React simple.

¿Por qué usar Tailwind CSS?

Ya hay un montón de CSS marcos que simplifican la forma en que los desarrolladores diseñan páginas web. Entonces, ¿por qué debería usar Tailwind CSS?

Los marcos CSS como Bootstrap y Foundation son marcos obstinados, lo que significa que brindan a los desarrolladores componentes predefinidos que tienen estilos predeterminados. Esto limita tanto la personalización como la creatividad, y terminas con sitios web que parecen bastante genéricos.

CSS viento de cola, sin embargo, es un marco de utilidad primero que le brinda el control creativo para crear componentes dinámicos. Y a diferencia de Bootstrap, puede personalizar fácilmente los diseños a su gusto.

Otra ventaja de usar Tailwind CSS es que termina con un tamaño de paquete de CSS pequeño, ya que elimina todo el CSS no utilizado durante el proceso de compilación (que es diferente de Bootstrap, ya que incluye todos los archivos CSS en el construir).

Aprenda más sobre el diferencias entre Tailwind CSS y Bootstrap de nuestro artículo sobre el tema.

Desventajas de usar Tailwind CSS

Tailwind CSS tiene una curva de aprendizaje pronunciada incluso para desarrolladores experimentados. Se necesita algo de tiempo para aprender a usar completamente las clases de utilidad y es posible que deba consultar la documentación con frecuencia. Sin embargo, después de familiarizarse con las clases, le resultará más fácil y rápido en comparación con el CSS simple.

A la mayoría de los desarrolladores les gusta seguir el principio de separación de intereses, de modo que los archivos CSS y HTML se escriben en archivos diferentes. Con Tailwind CSS, escribes el CSS directamente en el marcado HTML, un inconveniente para algunos.

Incluso con estas desventajas, Tailwind CSS es un marco que debe considerar seriamente si ya se siente cómodo con CSS y desea crear diseños más rápido.

Primeros pasos: crear un proyecto React

Ejecute el siguiente comando en la terminal para crear un andamio Reaccionar aplicación usando crear-reaccionar-app.

npx crear-reaccionar-aplicación reaccionar-viento de cola

crear-reaccionar-app proporciona una manera fácil de crear una aplicación React sin configurar herramientas de compilación como webpack, babel o linters. Esto significa que termina con un entorno React funcional en cuestión de minutos.

El comando anterior crea una nueva carpeta llamada reaccionar-viento de cola. Navegue hasta la carpeta y ábrala con su editor de texto preferido.

cd reaccionar viento de cola

A continuación, instale Tailwind CSS y configúrelo para que funcione con la aplicación React.

Usa Tailwind CSS en React

Instale Tailwind CSS y sus dependencias con este comando:

npm instalar tailwindcss postcss autoprefixer

PostCSS utiliza complementos de JavaScript para que CSS sea compatible con la mayoría de los navegadores. Comprueba el navegador en el que se ejecuta la aplicación y determina los polirrellenos necesarios para que su CSS funcione sin problemas. Autoprefixer es un complemento de PostCSS que utiliza valores de caniuse.com para agregar automáticamente prefijos de proveedores a las reglas de CSS.

Inicializar Tailwind CSS

ejecutar el inicio de viento de cola Comando para generar archivos de configuración predeterminados de Tailwind CSS.

npx tailwindcss inicio

Esto crea tailwind.config.js en la carpeta raíz que almacena todos los archivos de configuración de Tailwind y contiene lo siguiente:

módulo.exportaciones = {
 contenido: [],
 tema: {
 extender: {},
 },
 complementos: [],
}

Configurar rutas de plantilla

Debe indicarle a Tailwind CSS los archivos que debe verificar para ver qué clases de CSS se están utilizando. Esto permite que Tailwind identifique y elimine las clases no utilizadas y, por lo tanto, reduce el tamaño del CSS generado.

En viento de cola.config.js, agregue las rutas de la plantilla debajo de la clave de contenido.

módulo.exportaciones = {
 contenido: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 extender: {},
 },
 complementos: [],
}

Inyectar Tailwind CSS en React

El siguiente paso es incluir Tailwind CSS en la aplicación usando @tailwind directivas.

Eliminar todo en índice.css y agregue lo siguiente para importar los estilos básicos, los componentes y las utilidades.

@base de viento de cola;
@componentes de viento de cola;
utilidades @tailwind;

Finalmente, asegúrese índice.css es importado en índice.js y Tailwind CSS estará listo para usar.

Uso de Tailwind CSS para diseñar un componente React

Creará la página web simple a continuación y le dará estilo usando las clases de utilidad de Tailwind.

Esta página contiene dos secciones principales: una barra de navegacióny la sección principal (que tiene un encabezado y un botón).

Para ilustrar cómo Tailwind CSS facilita la escritura de CSS, intente diseñar la página web usando CSS simple y Tailwind CSS.

Comience modificando el Aplicación.js en el origen carpeta para eliminar el código innecesario.

importar './Aplicación.css'
aplicación de función () {
 regreso (



 );
}
exportar la aplicación predeterminada;

A continuación, agregue el contenido de la página web a Aplicación.js.

importar "./Aplicación.css";
aplicación de función () {
 regreso (







 ¡Tailwind CSS facilita el estilo de los componentes de React!



Empezar






 );
}

Para usar CSS simple, agregue el CSS a Aplicación.css.

navegación {
 pantalla: flexible;
 justificar-contenido: espacio-entre;
 relleno: 16px 36px;
 color: #000;
 sombra de caja: 0px 2px 5px 0px rgba (168, 168, 168, 0.75);
}
.logo {
 tamaño de fuente: 18px;
 fuente-peso: negrita;
}
ul {
 estilo de lista: ninguno;
 pantalla: en línea-flexible;
}
tu li {
 margen izquierdo: 16px;
 cursor: puntero;
}
.héroe {
 pantalla: flexible;
 dirección de flexión: columna;
 alinear elementos: centro;
 margen superior: 64px;
}
h1 {
 tamaño de fuente: 36px;
 alineación de texto: centro;
}
.btn {
 color de fondo: #000000;
 color: #fff;
 relleno: 10px;
 ancho: ajuste-contenido;
 margen superior: 36px;
}

Con Tailwind CSS, no necesita escribir las reglas de CSS para cada clase. En su lugar, utiliza clases de utilidad. Estas son clases en el ámbito de una sola propiedad CSS. Por ejemplo, si desea crear un botón con un fondo negro y un color de texto blanco, debe usar el bg-negro y texto-blanco clases de utilidad.

Aplicación.js debería verse así.

aplicación de función () {
 regreso (







 ¡Tailwind CSS facilita el estilo de los componentes de React!




 Empezar







 );
}

No necesitas importar Aplicación.css ya que los estilos generados por Tailwind CSS se almacenan en índice.css en el que importaste índice.js más temprano.

En comparación con el CSS simple, este enfoque da como resultado menos código que es fácil de entender.

Codifique con estilo con Tailwind CSS

En este artículo, aprendió sobre Tailwind CSS, sus fortalezas, desventajas y cómo puede usar sus clases de utilidad en aplicaciones React. Además de las clases, Tailwind CSS también ofrece otras características adicionales, incluida la capacidad de crear diseños receptivos y componentes reutilizables.

Pero, como mencionamos anteriormente, Tailwind está lejos de ser el único framework CSS en el mercado. ¿Cuál usarás para tu próximo proyecto?

Viento de cola CSS vs. Bootstrap: ¿Cuál es un mejor marco?

Al elegir un marco CSS, es importante encontrar el que cumpla con sus requisitos.

Leer siguiente

Sobre el Autor