gatsby emotion tailwind starter

Starter penipu emosi gatsby

** Harap dicatat bahwa template ini tidak lagi dipertahankan **

Templat pemula untuk membuat situs web statis yang cepat dan cepat. Datang pra-dibangun dengan Gatsby, emosi, dan tailwind untuk membuat Anda bangun dan berlari dengan cepat. Terinspirasi oleh Blog Gatsby-Starter

Demo di -host di Netlify.

Fitur

• Bereaksi Generator Statis Gatsbyjs V2
• Emosi Perpustakaan CSS-IN-JS untuk komponen gaya Anda
• Kerangka kerja utilitas CSS Tailwind CSS untuk dengan cepat menambah gaya
• Dukungan offline
• Aplikasi Web Progresif
• Malas memuat gambar dengan dukungan webp
• Sitemap yang dihasilkan otomatis
• Varian CSS Tailwind Mode Gelap

Memulai

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

Mulailah berkembang

Navigasi ke Direktori Template

 # 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

Menggunakan Emosi & Tailwind

Dengan tailwind Perpustakaan Utilitas CSS Anda dapat dengan cepat menambahkan gaya dan desain responsif, semua tanpa harus menulis CSS apa pun. Emosi memungkinkan Anda untuk memberi nama dan elemen gaya dalam file JS Anda.

 /*
  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 >
 </ >
) ;

Dokumen Tailwind adalah sumber yang bagus untuk memulai. Starter menggunakan Twin.macro yang merupakan perpustakaan yang fantastis, dan mencakup banyak varian tambahan.

Kustomisasi

• Konfigurasi Tailwind. Buka file tailwind.config.js untuk mengatur preferensi & persyaratan proyek Anda sendiri, seperti break-point, warna, dan font.

• Komponen tata letak ( src/components/Layout.js ) digunakan untuk mengatur tata letak standar standar untuk membungkus halaman.

• Mode gelap & terang. Buka src/components/styled/baseStyles.js dan tailwind.config.js untuk melihat di mana/bagaimana variabel kustom CSS ditambahkan. Anda juga dapat menggunakan varian gelap Tailwinds dalam komponen bergaya, seperti yang ditunjukkan dalam src/components/home/styled/card.js dengan varian gelap, dan src/components/styled/socialList.js untuk varian ringan.

• Template ini menggunakan tipografi plugin untuk mengoptimalkan pengiriman font. Mengubah font hanya membutuhkan menginstal font jenis huruf favorit Anda dan mengimpor ke gatsby-browser.js . Ingatlah untuk menambahkan font Anda ke dalam tailwind.config.js , baik array font sans/serif, untuk menggunakannya dengan utilitas tailwind.

• Komponen SEO, diambil dari Blog Gatsby-Starter, memungkinkan Anda untuk menambahkan deskripsi & judul SEO Anda.

• Favicon. Dihasilkan secara otomatis dari gatsby-plugin-manifest diatur di gatsby-config.js . Ganti favicon saat ini ( src/images/icon/logo.png ) dengan ikon 512x512 Anda sendiri