Nextjs Tailwind css e Typescript 설정

Olá devs는 Nextjs Tailwind css와 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.

설치 o Nextjs e o Typescript

Para instalar o Nextjs e o Typescript tens que ter o nodejs instalado na tua máquina. 터미널에 터미널을 설치하지 않고 nodejs를 설치할 수 있습니다.
yarn create next-app my-app --typescript우npx create-next-app@latest my-app --ts

Tailwind css 설치

Tailwind css 디지털 os seguintes comandos를 설치합니다.
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p우yarn add -D tailwindcss postcss autoprefixeryarn tailwindcss init -p

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 파스타styles que está dentro do projectomy-app apague o arquivoHome.module.css e apague todo que está dentro do arquivoglobals.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 파스타 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

집행관입니다.

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

링크두메우블로그mao-na-massa