gatsby emotion tailwind starter

蓋茨比情緒逆風開始

**請注意，此模板不再維護**

一個啟動器模板來創建一個閃電般的靜態網站。預先建立了蓋茨比，情感和尾風，以使您迅速起床。受蓋茨比啟動博客的啟發

演示託管在Netlify上。

特徵

• React靜態發電機gatsbyjs v2
• CSS-In-JS圖書館情感您的樣式組件
• CSS公用事業框架尾風CSS快速添加樣式
• 離線支持
• 漸進的網絡應用程序
• 通過WebP支持的懶惰加載圖像
• 自動生成的站點地圖
• 暗模式尾風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 >
 </ >
) ;

尾風文檔是讓您入門的絕佳資源。起動器使用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 ，用於光變體。

• 該模板使用插件字體來優化字體傳遞。更改字體僅需要安裝您喜歡的字體font並導入到gatsby-browser.js中。請記住，將您的字體（S）添加到tailwind.config.js中，要么是sans/serif陣列，以便將其與尾風實用程序一起使用。

• SEO組件，取自Gatsby-Starter-Blog，允許您添加SEO描述和標題。

• Favicon。從gatsby-config.js中的Gatsby-Plugin-Manifest自動生成。用自己的512x512圖標替換當前的favicon（ src/images/icon/logo.png ）