Si desea diseñar sus aplicaciones con un marco rápido, flexible y confiable, Tailwind CSS es una excelente opción. Tailwind es un marco CSS que lo ayuda a diseñar componentes web personalizados. Puede diseñar componentes sin tener que alternar entre archivos HTML y CSS.

A diferencia de Bootstrap, Tailwind no tiene clases predefinidas. En cambio, puedes personalizar el tuyo. Con Tailwind, puede crear componentes complejos con utilidades, funciones y directivas primitivas.

Aprenda a instalar y usar Tailwind para crear increíbles interfaces de usuario en sus proyectos Next.js.

Instalar Tailwind CSS en Next.js

Comience instalando Tailwind en una aplicación Next.js. El proceso es similar a instalar Tailwind en una aplicación React, con una pequeña diferencia en el proceso de configuración.

Ve a la Instalación de Tailwind CSS página. Luego ve a la Guías marco sección y seleccione Siguiente.js

. Esta sección contiene todas las instrucciones que necesita para configurar Tailwind en su proyecto Next.js.

Para instalar Tailwind a través de npm, el administrador de paquetes de JavaScript, ejecute estos dos comandos de terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Estos comandos crean dos archivos de configuración llamados tailwind.config.js y postcss.config.js en la carpeta raíz del proyecto. Estos archivos indican que TailwindCSS se instaló correctamente. También puede instalar Tailwind CSS a través de Tailwind CLI o como complemento de PostCSS.

Configurar plantillas

Después de la instalación, debe configurar las rutas de plantilla proporcionadas en la guía de instalación para el archivo de configuración de su aplicación. Agregue el siguiente código a la archivo tailwind.config.js:

/** @tipo {importación('tailwindcss').Config}*/
módulo.exportaciones = {
 contenido: [ 
"./aplicación/**/*.{js, ts, jsx, tsx}",
"./páginas/**/*.{js, ts, jsx, tsx}",
"./componentes/**/*.{js, ts, jsx, tsx}",
// O si usa el directorio `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 extender: {},
 },
 complementos: [],
}

Agregar directiva Tailwind a la aplicación

A continuación, agregue las siguientes directivas de Tailwind a su archivo CSS de la aplicación. Este es el archivo llamado global.css. Debe eliminar el contenido del archivo global.css y agregar las directivas Tailwind.

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

Ejecutar proceso de compilación

Ahora, en la terminal, ejecute la herramienta CLI con el siguiente comando:

npm ejecutar dev

Este comando escanea sus archivos de plantilla en busca de clases y crea su CSS. Se abrirá un puerto para que pueda ver el navegador.

Ahora, si navega al servidor en http://localhost: 3000 Verás tu aplicación. Debería notar un ligero cambio en el contenido. Esto indica que el proceso de instalación es un éxito y Tailwind CSS está activo.

Usar Tailwind en el proyecto

A continuación, probemos las características de Tailwind CSS aplicando clases a su proyecto. Por ejemplo, tiene una aplicación con el texto "Hola Tailwind". Quieres darle un color rojo con un fondo azul claro.

Crear un Inicio.tsx archivo y luego agregue el siguiente código:

exportarpor defectofunciónHogar() {
devolver (
"bg-azul-300">
'texto-rojo-900'>Hola Tailwind CSS</h1>
 </body>
 );
} 

Ahora, cuando navegue hasta el navegador, verá que el texto cambia a rojo y el fondo es azul.

Puede explorar otras características de Tailwind CSS para diseñar otros componentes de su aplicación. Los modificadores condicionales le permiten crear estados reactivos como flotar y enfocar. También puede personalizar sus páginas a modos oscuros y claros según las preferencias del usuario.

Ventajas de usar Tailwind CSS

Creado por Adam Wathan en 2017, Tailwind CSS se diferencia de otras bibliotecas de CSS en muchos aspectos. Tiene cero tiempo de ejecución, por lo que es muy rápido. Y es fácil de instalar. Tailwind escanea todos los archivos HTML y los componentes de JavaScript en busca de nombres de clase en su aplicación. Luego genera los estilos correspondientes que diseñan los elementos.

Tailwind CSS le permite diseñar componentes complejos a partir de utilidades primitivas. Puede reutilizar estilos en los componentes y usar modificadores para aplicar estilo a las interfaces de usuario receptivas. Siga los pasos aquí para aprender cómo instalar y usar Tailwind CSS para personalizar aplicaciones que coincidan con su marca.