gatsby emotion tailwind starter 다운로드 -Gatsby gatsby emotion tailwind starter 소스 코드 다운로드

gatsby emotion tailwind starter

기타 카테고리

v4.1.0

다운로드

개츠비

개츠비 감정 테일 윈드 스타터

이 템플릿은 더 이상 유지 관리되지 않습니다

Lightening-Fast 정적 웹 사이트를 만들기위한 스타터 템플릿. 개츠비, 감정, 테일 윈드로 미리 지어지면서 빨리 달리도록합니다. 개츠비 스타 터 블로그에서 영감을 얻었습니다

NetLify에서 호스팅 된 데모.

특징

정적 발전기 Gatsbyjs v2에 반응합니다
스타일 구성 요소에 대한 CSS-in-JS 라이브러리 감정
CSS 유틸리티 프레임 워크 테일 윈드 CSS는 스타일을 빠르게 추가합니다
오프라인 지원
프로그레시브 웹 앱
Webp Support가있는 게으른로드 이미지
자동 생성 된 사이트 맵
다크 모드 테일 윈드 CSS 변형

시작하기

 # download the template zip via dropdown or
git clone https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter.git

개발을 시작하십시오

템플릿 디렉토리로 이동하십시오

 # install dependencies
npm install
# yarn
yarn

# development with hot re-load
npm run dev
# yarn
yarn dev

# build for production
npm run build
# yarn
yarn build

감정 및 꼬리 바람을 사용합니다

CSS 유틸리티 라이브러리 테일 윈드를 사용하면 CSS를 쓰지 않고도 스타일과 반응 형 디자인을 빠르게 추가 할 수 있습니다. 감정을 사용하면 JS 파일 내에서 이름과 스타일 요소를 지정할 수 있습니다.

 /*
  import tw, { styled } from 'twin.macro';

  ** Creating a styled div, centering children via flex-box **
*/

const StyledDiv = styled . div `
  ${ tw `flex justify-center items-center` }
`

/*
  ** Or with grid **
*/
const AltStyledDiv = tw . div `grid place-content-center place-items-center`

return (
 < >
    < StyledDiv >
      < p > I'm centred </ p >
      < p > Me too! </ p >
    </ StyledDiv >
    < AltStyledDiv >
      < p > Same here </ p >
    </ AltStyledDiv >
 </ >
) ;

Tailwind Docs는 시작하기에 훌륭한 자료입니다. 스타터는 환상적인 라이브러리 인 Twin.Macro를 사용하며 많은 추가 변형을 포함합니다.

사용자 정의

테일 윈드 구성. tailwind.config.js 파일을 열면 브레이크 포인트, 색상 및 글꼴과 같은 프로젝트 기본 설정 및 요구 사항을 설정하십시오.
레이아웃 구성 요소 ( src/components/Layout.js )는 표준화 된 기본 레이아웃을 랩 페이지로 설정하는 데 사용됩니다.
다크 및 라이트 모드. src/components/styled/baseStyles.js 및 tailwind.config.js 를 열어 CSS 사용자 정의 변수가 어떻게 추가되는지 확인하십시오. src/components/home/styled/card.js 에 표시된대로 src/components/styled/socialList.js 에 표시된대로 Styled 구성 요소 내에서 Tailwinds의 Dark Variant를 사용할 수도 있습니다.
이 템플릿은 플러그인 서체를 사용하여 글꼴 전달을 최적화합니다. 글꼴 변경은 단순히 좋아하는 서체 폰트를 설치하고 gatsby-browser.js 로 가져 오면됩니다. Tailwind 유틸리티와 함께 사용하려면 글꼴을 Fonts Sans/Serif 배열 인 tailwind.config.js 에 추가하십시오.
Gatsby-Starter-Blog에서 가져온 SEO 구성 요소를 사용하면 SEO 설명 및 제목을 추가 할 수 있습니다.
파비콘. gatsby-config.js 에서 설정된 Gatsby-Plugin-Manifest에서 자동으로 생성되었습니다. 현재 Favicon ( src/images/icon/logo.png )을 자신의 512x512 아이콘으로 교체하십시오.