const colors = require('tailwindcss/colors')

const colorPrimary = {
  50: '#e6edf5',
  100: '#ccdbeb',
  200: '#99b8d6',
  300: '#6694c2',
  400: '#3371ad',
  500: '#004d99',
  600: '#00458a',
  700: '#003e7a',
  800: '#00366b',
  900: '#002e5c',
}

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./vendor/filament/**/*.blade.php",
    "./node_modules/flowbite/**/*.js",
  ],
  darkMode: 'class',
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1.25rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: ' colors.black',
      white: colors.white,
      utama: colorPrimary[500],
    },
    extend: {
      colors: {
        primary: colorPrimary,
        success: colors.green,
        warning: colors.yellow,
        danger: colors.rose,
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('flowbite/plugin'),
  ],
}