tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './lib/**/*.{js,ts,jsx,tsx}'],
  safelist: [
    'bg-ocf-yellow',
    'bg-ocf-yellow/5',
    'bg-ocf-yellow/10',
    'bg-ocf-yellow/20',
    'bg-ocf-yellow/30',
    'bg-ocf-yellow/40',
    'bg-ocf-yellow/50',
    'bg-ocf-yellow/60',
    'bg-ocf-yellow/70',
    'bg-ocf-yellow/80',
    'bg-ocf-yellow/90',
    'bg-ocf-yellow/100',
  ],
  theme: {
    screens: {
      ...defaultTheme.screens,
      short: { raw: '(max-height: 800px)' },
      xs: { max: '400px' },
    },
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
    fontWeight: {
      hairline: 100,
      'extra-light': 100,
      thin: 200,
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
      'extra-bold': 800,
      black: 900,
    },
    extend: {
      boxShadow: {
        'side-bar': '0px 10px 10px rgba(0, 0, 0, 0.15)',
      },
      gridTemplateAreas: {
        'dashboard-desktop': [
          'Expected-Total-Output Sunny Weather-Icons',
          'Site-Graph   Site-Graph   Recommendation',
          'Graph   Graph     Graph',
        ],
        'dashboard-mobile': [
          'Heading1 Heading1',
          'Sunny Recommendation',
          'Site-Graph   Site-Graph',
          'Heading2 Heading2',
          'Expected-Total-Output Current-Output',
          'Weather-Icons Weather-Icons',
          'Graph Graph',
        ],
        'dashboard-mobile-xs': [
          'Heading1 Heading1',
          'Sunny Recommendation',
          'Site-Graph   Site-Graph',
          'Heading2 Heading2',
          'Current-Output Current-Output',
          'Weather-Icons Weather-Icons',
          'Graph Graph',
        ],
      },
      gridTemplateColumns: {
        'desktop-columns': '1fr 1fr 1fr',
        'mobile-columns': '1fr 1fr',
      },
      gridTemplateRows: {
        'desktop-rows': 'auto auto auto',
        'mobile-rows': 'auto auto auto auto auto auto auto',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        mono: ['ui-monospace', ...defaultTheme.fontFamily.mono],
        serif: ['Source Code Pro', ...defaultTheme.fontFamily.serif],
      },
      colors: {
        amber: {
          DEFAULT: '#FFD053',
          50: '#FFFFFF',
          100: '#FFFDF6',
          200: '#FFF1CD',
          300: '#FFE6A5',
          // 400: "#FFDB7C",
          400: '#FFD053',
          600: '#FFC11B',
          700: '#E2A400',
          800: '#AA7B00',
          900: '#725300',
        },
        'ocf-yellow': {
          DEFAULT: '#FFD053',
          50: '#FFFFFF',
          100: '#FFFDF6',
          200: '#FFF1CD',
          300: '#FFE6A5',
          400: '#FFDB7C',
          500: '#FFD053',
          600: '#FFC11B',
          700: '#E2A400',
          800: '#AA7B00',
          900: '#725300',
        },
        'ocf-dusty-orange': {
          DEFAULT: '#FFAC5F',
          50: '#FFFFFF',
          100: '#FFFFFF',
          200: '#FFEBD9',
          300: '#FFD6B1',
          400: '#FFC188',
          500: '#FFAC5F',
          600: '#FF8F27',
          700: '#EE7200',
          800: '#B65700',
          900: '#7E3C00',
        },
        // DEFAULT is the brand colour, others are guesstimated shades
        'ocf-orange': {
          DEFAULT: '#FF9736',
          50: '#fff1eb',
          100: '#ffe1d1',
          200: '#ffd5b8',
          300: '#FEBF83',
          400: '#FFC188',
          500: '#ffac69',
          600: '#FF9736',
          700: '#e67c19',
          800: '#e67802',
          900: '#7d4500',
        },
        'ocf-gray': {
          DEFAULT: '#E4E4E4',
          50: '#FFFFFF',
          100: '#FFFFFF',
          200: '#D9D9D9',
          300: '#DDDDDD',
          400: '#F8F8F8',
          500: '#E4E4E4',
          600: '#C8C8C8',
          700: '#ACACAC',
          800: '#909090',
          900: '#747474',
          1000: '#444444',
        },
        'mapbox-black': {
          DEFAULT: '#191a1a',
          300: '#A9A9A9',
          500: '#6C6C6C',
          700: '#343332',
          900: '#191a1a',
        },
        'ocf-black': {
          DEFAULT: '#14120E',
          50: '#80735A',
          100: '#746851',
          200: '#5C5340',
          300: '#443D30',
          400: '#2C281F',
          500: '#2B2B2B',
          600: '#14120E',
          700: '#000000',
          800: '#000000',
          900: '#000000',
        },
        'ocf-blue': {
          DEFAULT: '#48B0DF',
          50: '#E4F3FA',
          100: '#D3ECF7',
          200: '#B0DDF1',
          300: '#8DCEEB',
          400: '#6BBFE5',
          500: '#48B0DF',
          600: '#2497CB',
          700: '#1B749C',
          800: '#13506C',
          900: '#0B2D3C',
        },
        'ocf-green': {
          DEFAULT: '#63BCAF',
          50: '#E3F3F1',
          100: '#D5EDEA',
          200: '#B9E1DB',
          300: '#9CD5CC',
          400: '#80C8BE',
          500: '#63BCAF',
          600: '#45A294',
          700: '#357A70',
          800: '#24534C',
          900: '#132C28',
        },
        'ocf-teal': {
          DEFAULT: '#7BCDF3',
          50: '#F1F9F8',
          100: '#E2F3F0',
          200: '#C6E7E2',
          300: '#A9DAD3',
          400: '#8DCEC5',
          500: '#70C2B6',
          600: '#4BAFA0',
          700: '#3A887C',
          800: '#296158',
          900: '#183934',
        },
      },
    },
  },
  darkMode: 'class',
  // plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]
  plugins: [require('@savvywombat/tailwindcss-grid-areas')],
};