Skip to content
Astro Snipcart

Getting Started

Install

Terminal window
npm install @lloydjatkinson/astro-snipcart-design-system

Configure Tailwind

Terminal window
npx astro add @astrojs/tailwind
npm i -D @tailwindcss/forms @tailwindcss/typography

Add the following to the generated tailwind.config.cjs file (remember, the Inter font is used by this design system and you will need to install it separately from Google Fonts - a future version of this library will ship with it by default - use the Reference Playground to see how):

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';


export default {
    content: [
        './src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}',
        'node_modules/@lloydjatkinson/astro-snipcart/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}',
        'node_modules/@lloydjatkinson/astro-snipcart-design-system/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}',
    ],
    theme: {
        fontFamily: {
            'sans': ['"Inter"', ...defaultTheme.fontFamily.sans],
            'serif': [...defaultTheme.fontFamily.serif],
            'mono': [...defaultTheme.fontFamily.mono]
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
} satisfies Config;

Don’t feel ready to design?

Use the two reference example pages as a starting point!

Don’t forget, there is a real-world example E-commerce site available here. The source code for this is availiable in this repository here.