Desenvolvendo uma landing Page em NextJs c/ Tailwind CSS | Codeboost
Neste artigo, vamos explorar como criar uma landing page utilizando o framework NextJs e o framework de estilo Tailwind CSS.
NextJs é um framework de React que permite a criação de aplicações web de forma rápida e eficiente. Ele também oferece suporte para renderização no lado do servidor, facilitando a otimização do SEO e o carregamento rápido das páginas.
Já o Tailwind CSS é um framework de estilo que permite a criação de designs customizados de forma rápida e eficiente. Ele utiliza classes utilitárias para estilizar os elementos, o que facilita a manutenção e a criação de designs responsivos.
Para começar a desenvolver a landing page, primeiro precisamos instalar o NextJs e o Tailwind CSS. Em seguida, podemos criar os componentes e estilizá-los utilizando o Tailwind CSS.
Com o NextJs, podemos criar páginas facilmente utilizando o conceito de roteamento dinâmico. Essa funcionalidade permite a criação de páginas de forma rápida e organizada.
Com o Tailwind CSS, podemos estilizar os elementos de forma rápida e eficiente, utilizando classes utilitárias para aplicar estilos como cores, tamanhos e espaçamentos.
A combinação do NextJs e Tailwind CSS permite a criação de landing pages de forma rápida e eficiente, com um código limpo e organizado.
Em resumo, desenvolver uma landing page em NextJs com Tailwind CSS é uma ótima maneira de criar páginas web de forma eficiente, utilizando tecnologias modernas e poderosas.
Esperamos que este artigo tenha sido útil para entender como desenvolver uma landing page em NextJs com Tailwind CSS. Se tiver alguma dúvida ou sugestão, não hesite em entrar em contato conosco.
bem legal, sei que foi mais demonstrativo
algumas coisas eu faria diferente
que terminal massa, depois se puder fazer um video sobre qual é e qual Sistema operacional vc está usando.. vai matar eu de curiosidade !!!
Pode disponibilizar o layout do figma?
já pensou em usar o tailwind export do figma ? ja vem pronto so fazer leves ajustes…
conteúdo tooop
Muito muito top.
Fiz essa aula hj e me desenvolvi mais em alguns pontos com TailwindCSS e aprendi coisas novas.
Na parte do menu e da lista e serviços fiz um "mock" dos dados e componetizei percorrendo com um map.
É simples mas já dá um start pra trabalhar com renderização de listas no React/NextJS
Vlw @Codeboost.
Dahora mano eu fiz igualzinho a você já vai ficar no meu portifólio, mas, eu gostaria que você fizesse outro vídeo mostrando como se faz a responsividade usando Tailwind, pq usando CSS puro fica facinho de fazer a responsividade com Tailwind me parece bem mais trabalhoso
Cara, ja fiz de tudo aqui mas não consigo fazer o bg renderizar a minha imagem.
tailwind.config.js
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
backgroundImage: {
'img_bg_hero': "url('../assets/bg-hero.png')"
},
extend: {
colors: {
'primary_gray': '#E9EAEC',
'primary_yellow': '#FFCC00'
}
},
},
daisyui: {
themes: ["light"],
},
plugins: [require("daisyui")],
}
export default config
meu componente
import {ReactNode} from "react";
export function SectionRoot({children} : {children: ReactNode}) {
return (
<section className="w-full h-screen bg-img_bg_hero">
{children}
</section>
)
}
consegue ver algo de errado nisso ai?
muito bom o video, no aguardo de uma parte 2
Faça mais, por favor
Cara que aula incrivel aprendi muito, eu consigo usar o tailwind para para desenvolver qualquer template?
Nice tutorial ,Thanks
please can we have the figma file
Uma sugestão sobre o botão azul, você poderia ter usado o :after e fazer o posicionamento absoluto, sem ter que criar uma div, e sobre o alinhamento da imagem da Mulher, você poderia ter colocado uma classe Flex e um space-between que ele iria fazer o espaçamento. O vídeo está sensacional
Hahahaha, to assistindo o começo e eu também era assim. não aguentava nem ouvir falar de Tailwind. Depois que comecei a utilizar, não quero saber de outra coisa. Apesar de odiar um canavial de classes no meu componente, eu amo desenvolver com tailwind
pra mostrar esses dados do que vc está usando no tailwind, por exemplo: vc define h-9 e mostra ao lado o tamanho em rem e px, tem algum outro plugin além do Tailwind CSS InteliSense?
valeu pela aula!
Cara no min 37 tu usou um container para centralizar todos os elemento do projecto como tu faz la no curso onde tens uma classe -container no sass, aqui tu pode fazer também nas configs do tailwindcss function px(pixles) {
return `${pixles / 16}rem`;
}
export default {
theme: {
container: {
center: true,
padding: "1rem",
screens: {
lg: px(1280),
xl: px(1280),
"2xl": px(1280),
}
}
}
}
Tem como mandar o link do figma?
Uma pergunta que não tem muito a haver com aula
Como eu faço para deixar o terminal com essa borda um pouco "dourada" como mostra no começo do vídeo? É algo do Mac ou funciona em outros sistemas? ( ex: Linux )