alien-countries-api/tailwind.config.ts at main · jfudge/alien-countries-api · 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
import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {
      colors: {
        'dark-blue': 'hsl(209, 23%, 22%)',
        'very-dark-blue-bg': 'rgb(0, 29, 33)',
        'very-dark-blue-text': 'hsl(200, 15%, 8%)',
        'dark-gray': 'hsl(0, 0%, 52%)',
        'very-light-gray': 'hsl(0, 0%, 98%)',
        'yellow': 'rgb(255, 252, 19)',
        'alien': 'rgb(108,196,23)',
        'white': 'hsl(0, 0%, 100%)',
        'purple': 'rgb(142,0,231)'
      },
      fontSize: {
        'body-homepage': '14px',
        'body-detail': '16px'
      },
      fontWeight: {
        light: '300',
        semibold: '600',
        bold: '800'
      },
      container: {
        center: true,
        padding: '1rem',
        screens: {
          sm: '100%', // Full width on small screens
          md: '100%', // Full width on medium screens
          lg: '1024px', // Max container width for large screens
          xl: '1200px', // Max container width for extra large screens
          '2xl': '1280px' // Max container width for 2xl screens
        }
      },
      screens: {
        xs: '360px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px'
      }
    }
  },
  plugins: []
}

export default config