windi.config.ts

import colors from 'windicss/colors'
import { defineConfig } from 'windicss/helpers'
import typographyPlugin from 'windicss/plugin/typography'
import {
  BorderRadius,
  BoxShadow,
  Colors,
  Spacing,
  TransitionDuration,
  TransitionTiming,
  Typography,
  Width,
  ZIndex,
} from './theme'

// Utility function if you need to define a range of allowed classes
function range(size: number, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

export default defineConfig({
  darkMode: 'class',
  // https://windicss.org/posts/v30.html#attributify-mode
  attributify: true,

  plugins: [typographyPlugin()],
  theme: {
    colors: {
      ...Colors,
    },
    ...Typography,
    boxShadow: {
      ...BoxShadow,
    },
    extend: {
      colors: {
        ...Colors,
      },
      borderRadius: {
        ...BorderRadius,
      },
      spacing: {
        ...Spacing,
      },
      width: {
        ...Width,
      },
      zIndex: {
        ...ZIndex,
      },
      transitionDuration: {
        ...TransitionDuration,
      },
      transitionTimingFunction: {
        ...TransitionTiming,
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '65ch',
            color: 'inherit',
            a: {
              'color': 'inherit',
              'opacity': 0.75,
              'fontWeight': '500',
              'textDecoration': 'underline',
              '&:hover': {
                opacity: 1,
                color: colors.teal[600],
              },
            },
            b: { color: 'inherit' },
            strong: { color: 'inherit' },
            em: { color: 'inherit' },
            h1: { color: 'inherit' },
            h2: { color: 'inherit' },
            h3: { color: 'inherit' },
            h4: { color: 'inherit' },
            code: { color: 'inherit' },
          },
        },
      },
    },
  },
  safelist: [
    // range(100).map(i => `z-${i}`), example usage of range utility
  ],
})