tailwind.config.js

const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['DM sans', '"Noto Sans TC"', ...defaultTheme.fontFamily.sans],
      },
      height: {
        screen: ['100vh', '100dvh'],
      },
      minHeight: {
        screen: ['100vh', '100dvh'],
      },
      colors: {
        primary: {
          DEFAULT: 'hsl(0, 0%, 93%)',
          light: 'hsl(0, 0%, 93%)',
          dark: 'hsl(220, 13%, 18%)',
        },
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-6deg)' },
          '50%': { transform: 'rotate(6deg)' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
    iconsPlugin({
      collections: getIconCollections(['carbon']),
    }),
  ],
}