compressO/tailwind.config.ts at main · codeforreal1/compressO · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { heroui } from '@heroui/react'
import typography from '@tailwindcss/typography'
import type { Config } from 'tailwindcss'

const WIDTHS = Object.freeze({
  xs: '320px',
  sm: '576px',
  md: '768px',
  slg: '850px',
  lg: '992px',
  xl: '1280px',
  '2xl': '1440px',
  '3xl': '1660px',
})

const CUSTOM_MQ = {
  hxs: { raw: `(min-height: ${WIDTHS.xs})` },
  hsm: { raw: `(min-height: ${WIDTHS.sm})` },
  hmd: { raw: `(min-height: ${WIDTHS.md})` },
  hslg: { raw: `(min-height: ${WIDTHS.slg})` },
  hlg: { raw: `(min-height: ${WIDTHS.lg})` },
  hxl: { raw: `(min-height: ${WIDTHS.xl})` },
  h2xl: { raw: `(min-height: ${WIDTHS['2xl']})` },
  h3xl: { raw: `(min-height: ${WIDTHS['3xl']})` },
}

const config: Config = {
  darkMode: 'class',
  plugins: [
    heroui({
      addCommonColors: true,
    }),
    typography,
  ],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    // NextUI Components
    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      animation: {
        ripple: 'var(--animate-ripple)',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        black1: 'rgb(var(--color-black1) / <alpha-value>)',
        gray1: 'rgb(var(--color-gray1) / <alpha-value>)',
        white1: 'rgb(var(--color-white1) / <alpha-value>)',
      },
      fontFamily: {
        poppins: ['var(--font-poppins)'],
      },
      screens: { ...WIDTHS, ...CUSTOM_MQ },
      maxWidth: WIDTHS,
    },
  },
}
export default config