Next.js+Tailwind CSS로 조합을 만들었습니다.
8171 단어 Next.jsTailwind CSStech
이른바 TailWind CSS
유틸리티 범주[1]의 CSS 프레임워크를 사용합니다.
전통적인 CSS를 사용하려면 구성 요소나 페이지를 따라 CSS 파일을 만들어야 하지만 TailWind CSS를 사용하면 필요하지 않습니다.또한 HTML 스타일링을 직접 정의하는 유틸리티 카테고리를 사용하기 때문에 스타일을 쉽게 설정할 수 있습니다.
환경 구조
$ npx create-next-app new-portfolio
$ npm i tailwindcss
$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p
module.exports = {
- purge: [],
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Hello World</h1>
</>
)
}
@tailwind base;
@tailwind components;
@tailwind utilities;
$ npm run dev
$ npm run build
Tailwind CSS 사용 방법
위의 라벨을 사용하여 스타일을 기술합니다.
시험해 보다
GiitHub에 코드 업로드
$ cd ./new-portfolio
$ git init
$ git branch develop
$ git checkout develop
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/nyaruo/my-portfolio.git
$ git push -u origin develop
$ git checkout main
$ git merge develop
Deploy
참고로 진행하다.
위의 URL로 이동하여 Import Git Repository 아래의 텍스트 테이블을 클릭합니다.
계정 협업을 통해 All Repositories 를 선택하고 Install 을 선택합니다.
창고를 지정하여 Inport을 진행합니다.
Configure Project는 Default 상태를 유지합니다.
1분 정도 기다리면 페이지 표시가 성공합니다.
실제 제작된 사이트는 다음과 같습니다.
창설
사용할 매크로 패키지
npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons
공개 페이지
그림 완성
각주
클래스 이름 자체는 css의 속성과 그 값을 직접 나타낸다↩︎
Reference
이 문제에 관하여(Next.js+Tailwind CSS로 조합을 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/nyarufoy/articles/ae29c1b9395fe7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
