app.craft.vin/tailwind.config.js

import { join } from 'path';

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin';
import { vinTheme } from './vin-theme';

/** @type {import('tailwindcss').Config} */
export default {
	darkMode: 'class',
	content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
  theme: {
    fontFamily: {
      sans: ['Circular', 'sans-serif'],
      mono: ['CircularMono', 'sans-serif'],
    },
    extend: {
      // colors: {
      //   'red': {
      //     50: '#fdf3f3',
      //     100: '#fbe5e5',
      //     200: '#f8d0d0',
      //     300: '#f2afaf',
      //     400: '#e87d7d',
      //     500: '#db5858',
      //     600: '#c73b3b',
      //     700: '#a72e2e',
      //     800: '#8b2929',
      //     900: '#742828',
      //     950: '#3e1111',
      //   },
      //   'yellow': {
      //     50: '#fcfaee',
      //     100: '#f6f1cf',
      //     200: '#ede19a',
      //     300: '#e8d67d',
      //     400: '#ddbc42',
      //     500: '#d5a12b',
      //     600: '#bc7f23',
      //     700: '#9c5e21',
      //     800: '#804a20',
      //     900: '#693e1e',
      //     950: '#3c200c',
      //   },
      //   'green': {
      //     50: '#ecfdf3',
      //     100: '#d1fae1',
      //     200: '#a8f2c8',
      //     300: '#7de8b2',
      //     400: '#36d188',
      //     500: '#12b76e',
      //     600: '#079459',
      //     700: '#05774a',
      //     800: '#075e3d',
      //     900: '#074d33',
      //     950: '#022c1d',
      //   },
      //   'cyan': {
      //     50: '#eefdfc',
      //     100: '#d5f8f7',
      //     200: '#b0f1ef',
      //     300: '#7de8e8',
      //     400: '#3bd3d5',
      //     500: '#1fb6bb',
      //     600: '#1d939d',
      //     700: '#1e7680',
      //     800: '#216069',
      //     900: '#1f515a',
      //     950: '#0f353d',
      //   },
      //   'blue': {
      //     50: '#f1f7fd',
      //     100: '#dfedfa',
      //     200: '#c7dff6',
      //     300: '#a1caef',
      //     400: '#7db3e8',
      //     500: '#5390de',
      //     600: '#3e74d2',
      //     700: '#3561c0',
      //     800: '#31509c',
      //     900: '#2c467c',
      //     950: '#1f2c4c',
      //   },
      //   'indigo': {
      //     50: '#eff3fe',
      //     100: '#e3e7fc',
      //     200: '#cbd4fa',
      //     300: '#acb7f5',
      //     400: '#8b92ee',
      //     500: '#7d7de8',
      //     600: '#5d53d8',
      //     700: '#5044be',
      //     800: '#41399a',
      //     900: '#38357a',
      //     950: '#221f47',
      //   },
      //   'gray': {
      //     50: '#e6e6e6',
      //     100: '#d9d9d9',
      //     200: '#c2c2c2',
      //     300: '#a1a1a1',
      //     400: '#787878',
      //     500: '#5e5e5e',
      //     600: '#4d4d4d',
      //     700: '#404040',
      //     800: '#363636',
      //     900: '#2e2e2e',
      //     950: '#1a1a1a',
      //   },
      // },
    },
  },
	plugins: [
		forms,
		typography,
		skeleton({
			themes: {
        custom: [
          vinTheme
        ]
      }
		}),
	],
}