Sitemap
Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Follow publication

Building my site with GatsbyJS and TailwindCSS

4 min readJun 15, 2021

--

Photo by HalGatewood.com on Unsplash

Setting up a new GatsbyJS site

npm install -g gatsby-cli
gatsby new personal-site
cd personal-site

# Install the necessary plugins
npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

# Init the tailwind.config.js file
npx tailwindcss init -p
module.exports = {
plugins: [
...
`gatsby-plugin-postcss`,
]
}
@tailwind base;
@tailwind components;
@tailwind utilities;
npm install tailwindcss@latest

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

npm install @headlessui/react @heroicons/react

Optional configuration

Syntax highlighting

npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs
module.exports = {
plugins: [
...
`gatsby-remark-prismjs`,
]
}

Code linting

npm install -g prettier eslint
# Open the command palette (Cmd-Shift-P on MacOS)
type: ext install esbenp.prettier-vscode
press Enter
{
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"markdownlint.config": {
"MD033": false
}
}
{
"arrowParens": "always",
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 70
}

Replacing the main font

# Install the font
npm install @fontsource/inter
import '@fontsource/inter';
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
},
},

Running the site

gatsby develop
gatsby build
gatsby serve

--

--

Nerd For Tech
Nerd For Tech

Published in Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Mihai Bojin
Mihai Bojin

Written by Mihai Bojin

Software Engineer at heart, Manager by day, Indie Hacker at night. Writing about DevOps, Software engineering, and Cloud computing. Opinions my own.

Responses (1)