This is a collection of tooling configuration, styles, components and icons used for *.astro.build websites. It is not a general purpose component kit.
Install the package from git and related dependencies:
pnpm i github:withastro/site-kit
pnpm i -D eslint prettier typescript npm-run-all @astrojs/check
Update package.json
(The order of the scripts is important!):
{
"scripts": {
"lint": "astro sync && run-s --continue-on-error lint:*",
"lint:eslint": "eslint . --cache --fix --report-unused-disable-directives",
"lint:types": "tsc -b",
"lint:astro": "astro check",
"lint:prettier": "prettier . \"**/*.astro\" --cache --write --list-different"
},
"eslintConfig": {
"extends": "./node_modules/@astrojs/site-kit/eslint.config.cjs"
},
"prettier": "@astrojs/site-kit/prettier"
}
Add .prettierignore
:
pnpm-lock.yaml
Copy the workflow file into your repo:
wget https://raw.githubusercontent.com/withastro/site-kit/main/.github/workflows/lint.yml -O .github/workflows/lint.yml
If you're in a monorepo, add a new script to typecheck workspaces:
{
"scripts": {
"lint:types-workspaces": "pnpm -r exec tsc -b"
}
}
Install dependencies:
pnpm i -D tailwindcss @astrojs/tailwind
Add the tailwind integration, and disable base styles:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
export default defineConfig({
integrations: [
tailwind({
applyBaseStyles: false,
}),
],
});
Add the preset to your tailwind.config.ts
:
import preset from '@astrojs/site-kit/tailwind-preset';
import type { Config } from 'tailwindcss';
export default {
content: ['./src/**/*.{js,jsx,ts,tsx,mjs,astro}'],
presets: [preset],
} satisfies Config;
Import tailwind.css in your base layout component:
---
import '@astrojs/site-kit/tailwind.css';
---