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!
Aprende React JS con nuestros cursos
React JS Hooks: De Cero a Experto Creado Aplicaciones Reales
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