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 ）