Setup Nextjs Tailwind css e Typescript

Olá devs no post de hoje vamos aprender a crair um setup Nextjs Tailwind css e Typescript.

O setup que vamos aprender a criar hoje é um setup que vai ti possibilitar criar aplicações front end com mais rapidez e eficiência.

Segue os seguintes passos para criar o setup.

Instalar o Nextjs e o Typescript

Para instalar o Nextjs e o Typescript tens que ter o nodejs instalado na tua máquina. Como o nodejs instalado na tua máquina é só você digitar os seguintes comandos no teu termux ou terminal.

yarn create next-app my-app --typescript
ou
npx create-next-app@latest my-app --ts

Instalar o Tailwind css

Para instalar o Tailwind css digite os seguintes comandos.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
ou
yarn add -D tailwindcss postcss autoprefixer

yarn tailwindcss init -p

Configurar o Tailwind css

Depois de instalar o Tailwind css acesse o arquivo tailwind.config.js que está dentro do projecto my-app e adicione os seguintes códigos.

module.exports = {
content: [
"./pages/**/*.\/{js,ts,jsx,tsx\/}",
"./components/**/*.{js,ts,jsx,tsx\}",
], 
theme: {
extend: {

},
}, plugins: [

], }

Depois também acesse pasta styles que está dentro do projecto my-app apague o arquivo Home.module.css e apague todo que está dentro do arquivo globals.css e cole os códigos a baixo.

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

Programar um pouco

Agora é a hora de programar um pouco acesse o arquivo index.tsx que está dentro do projecto my-app na pasta pages e apague todo e adicione os seguintes códigos.

import React from "react";  
  function App() {
  return <h1 className="min-h-screen min-w-screen bg-blue-400 text-3xl flex justify-center items-center">Ola mundo</h1>
  }
export default App

Agora é só executar.

E assim o teu setup Nextjs Tailwind css e Typescript está montado agora é só você começar a criar aplicações front end mais rapidamente e com uma qualidade muito mais alta

Si este conteúdo foi relevante para você por favor si inscreve no meu Blog porque todas as semanas vai ter conteúdo novos sobre programação no celular termux vim nodejs reactjs nextjs javascript html css e muito mais até ao próximo post dev. o lema é Mão na Massa.

Link do meu blog mao-na-massa