Búsqueda de sitios web

Cómo instalar y usar Tailwind CSS en una aplicación Next.js


Tailwind CSS es fácil de instalar y usar con Next.js, solo asegúrese de configurarlo correctamente primero.

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 le 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 su lugar, puedes personalizar el tuyo propio. Con Tailwind, puede crear componentes complejos con utilidades, funciones y directivas primitivas.

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

Instale 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.

Vaya a la página de instalación de Tailwind CSS. Luego vaya a la sección Guías de Framework y seleccione Next.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 un complemento PostCSS.

Configurar plantillas

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

/** @type {import('tailwindcss').Config} */ 
module.exports = {
    content: [ 
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
        // Or if using `src` directory: 
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: { 
        extend: {},
    },
    plugins: [],
}

Agregar la directiva Tailwind a la aplicación

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

@tailwind base;
@tailwind components;
@tailwind utilities;

Ejecutar proceso de compilación

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

npm run 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 hasta el servidor en http://localhost:3000 verá su aplicación. Deberías notar un ligero cambio en el contenido. Esto indica que el proceso de instalación es exitoso y Tailwind CSS está activo.

Utilice Tailwind en el proyecto

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

Cree un archivo Home.tsx y luego agregue el siguiente código:

export default function Home() {
    return (
        <body className="bg-blue-300">
            <h1 className='text-red-900'>Hello 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 funciones 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 en modos oscuro y claro según las preferencias del usuario.

Ventajas de utilizar Tailwind CSS

Creada por Adam Wathan en 2017, Tailwind CSS se diferencia de otras bibliotecas CSS en muchos aspectos. No tiene tiempo de ejecución, lo que lo hace increíblemente rápido. Y es fácil de instalar. Tailwind escanea todos los archivos HTML y componentes JavaScript en busca de nombres de clases 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 todos los componentes y utilizar modificadores para diseñar interfaces de usuario responsivas. Siga los pasos aquí para aprender cómo instalar y usar Tailwind CSS para personalizar aplicaciones que coincidan con su marca.

Artículos relacionados: