gatsby emotion tailwind starter

ギャツビー感情尾翼スターター

**このテンプレートはもう維持されていないことに注意してください**

ライトニングファーストの静的Webサイトを作成するためのスターターテンプレート。ギャツビー、感情、追い風で事前に建てられ、すぐに立ち上がって走ります。ギャツビー・スターター・ブログに触発されました

Netlifyでホストされているデモ。

特徴

• 静的発電機Gatsbyjs v2を反応します
• スタイルのコンポーネントのCSS-in-JSライブラリエモーシング
• CSSユーティリティフレームワークTailwind CSSは、スタイルをすばやく追加します
• オフラインサポート
• プログレッシブWebアプリ
• WebPサポートを備えた怠zyな読み込み画像
• 自動生成サイトマップ
• ダークモードテールウィンド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ユーティリティライブラリTailwindを使用すると、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。 tailwind.config.jsファイルを開いて、ブレークポイント、色、フォントなどの独自のプロジェクトの設定と要件を設定します。

• レイアウトコンポーネント（ src/components/Layout.js ）は、ページをラップするために標準化されたデフォルトのレイアウトを設定するために使用されます。

• ダーク＆ライトモード。 src/components/styled/baseStyles.js and tailwind.config.jsを開き、CSSカスタム変数がどこに追加されているかを確認します。 src/components/styled/socialList.js src/components/home/styled/card.jsに示すように、ダークバリアントを備えたTailwindsのダークバリアントを使用することもできます。

• このテンプレートは、プラグインの書体を使用してフォント配信を最適化します。フォントを変更するには、お気に入りの書体フォントをインストールしてgatsby-browser.jsにインポートする必要があります。 TailWindユーティリティで使用するために、フォントをtailwind.config.js （フォントSANS/Serif配列）に追加することを忘れないでください。

• Gatsby-Starter-Blogから撮影されたSEOコンポーネントは、SEOの説明とタイトルを追加できるようにします。

• ファビコン。 gatsby-config.jsでセットセットのGatsby-Plugin-Manifestから自動生成。現在のFavicon（ src/images/icon/logo.png ）を独自の512x512アイコンに置き換えます