NextJS + TypeScript + Tailwind: Una combinación perfecta

Tailwind CSS es un marco CSS de primera utilidad que se utiliza para crear diseños basados ​​en marcas. Next.js es un marco de React con características como renderizado híbrido estático y de servidor, compatibilidad con TypeScript, agrupación inteligente, búsqueda previa de ruta y más. Cuando estas tecnologías se combinan, pueden ser bastante útiles en el desarrollo de sitios web y aplicaciones web.

Veremos algunas de las ventajas de usar Tailwind CSS en este artículo. Luego, aprenderemos a compilar Next.js con TypeScript y TailwindCSS. Comenzaremos utilizando TypeScript y luego continuaremos con TailwindCSS. El objetivo del tutorial es ayudarlo a configurar un proyecto usando estas tres tecnologías.

Tendrá una aplicación Next.js en funcionamiento usando TypeScript y TailwindCSS una vez que haya terminado la lección. ¡Puede ampliarlo y convertirlo en una aplicación útil!

Ventajas de usar Tailwind CSS

• Variables significativas: con Tailwind CSS, solo necesita aplicar text-sm, text-lg o text-xl a sus elementos HTML. Indica que desea un tamaño de fuente pequeño, grande o extra grande, respectivamente.
• Clase predefinida: Tailwind tiene varias clases relacionadas con márgenes como m-6 o m-8. Pero, no proporciona m-7. Otra cosa m-6 es igual al margen: 1.5rem; y m-8 es igual al margen: 2rem;. Por lo tanto, no puede especificar un margen igual a 1,75 rem de forma predeterminada (debe realizar algunos cambios de configuración para usar un margen igual a 1,75 rem). Esto significa que ya no tiene que mover su píxel uno por uno, lo que puede ahorrarle mucho tiempo.
• Funciones listas para usar: la creación de componentes Tailwind reutilizables (sin instalar React en su proyecto). PurgeCSS es extremadamente fácil de configurar. Por lo tanto, puede eliminar las clases CSS no utilizadas y reducir el tamaño de su archivo de estilo.

Aprende React JS con nuestros cursos

React JS Hooks: De Cero a Experto Creado Aplicaciones Reales

¡Ahora comencemos la codificación!

Crear una nueva aplicación next.js

Ejecute el siguiente comando en su Terminal y siga el asistente. Como resultado, se creará un nuevo directorio que contiene la aplicación.

npx create-next-app

 

Iniciar la aplicación

Ejecute el servidor de desarrollo y abra http://localhost:3000 con su navegador para ver el resultado.

npm run dev

 

Crear directorio src y mover páginas a src

El directorio src es muy común en muchas aplicaciones y Next.js lo admite de forma predeterminada.

cd <your-app-directory>
mkdir src
mv pages src

 

Soporte mecanografiado

Next.js es compatible con TypeScript desde el primer momento.

touch tsconfig.json
npm i -D typescript @types/react @types/node

 

Reinicie el servidor de desarrollo ejecutando npm run dev, verá esto en la consola:

We detected TypeScript in your project and created a tsconfig.json file for you. 

 

Pruebe la compatibilidad con TypeScript cambiando el nombre de index.js a index.tsx y reinicie el servidor de desarrollo

mv src/pages/index.js src/pages/index.tsx

 

Integrar TailwindCSS

Instale TailwindCSS y PostCSS. Se puede encontrar más información en la documentación oficial de TailwindCSS. Instalación

npm i -D tailwindcss postcss-import autoprefixer

 

Configurar PostCSS Crear postcss.config.js

touch postcss.config.js

module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ]
}

 

Agregue TailwindCSS a su css

Cree src/styles/index.css.

mkdir src/styles && touch src/styles/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';

/* Your own custom component styles */

@import 'tailwindcss/utilities';

 

Cree un archivo src/pages/_app.tsx Luego agregue styles/index.css a su aplicación importando el archivo CSS.

touch src/pages/_app.tsx

import { AppProps } from 'next/app'
import '../styles/index.css'
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp

 

Ahora que nuestro proyecto está listo, editemos el archivo index.tsx y coloquemos nuestro propio texto.

export default function Home() {
return (
   <div className="container flex items-center p-4 mx-auto min-h-screen justify-center">
     <main>
       <h1 className="font-mono text-xl code">
         Welcome to <span className="text-purple-700">Nextjs</span>, <span className="text-indigo-700">TailwindCSS</span> and <span className="text-gray-700">TypeScript</span>
       </h1>
     </main>
   </div>
 )
}

 

Luego ejecute el servidor de desarrolladores en http://localhost:3000 para ver nuestro resultado.

Recuerda ver nuestros cursos online

VER CURSOS