Tailwind Color Scheme

tailwind-1.config.js

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: colors.sky[500],
          dark: colors.sky[800],
        },
        secondary: {
          DEFAULT: colors.coolGray[500],
          dark: colors.coolGray[800],
        },
        accent: {
          DEFAULT: colors.rose[500],
          dark: colors.rose[800],
        },
        success: {
          DEFAULT: colors.green[500],
          dark: colors.green[800],
        },
        warning: {
          DEFAULT: colors.amber[500],
          dark: colors.amber[800],
        },
        info: {
          DEFAULT: colors.cyan[500],
          dark: colors.cyan[800],
        },
        error: {
          DEFAULT: colors.red[500],
          dark: colors.red[800],
        },
      },
    },
  },
  plugins: [],
}

tailwind.config.js

module.exports = {
    content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1976D2',
          dark: '#0F4DA8',
        },
        secondary: {
          DEFAULT: '#607D8B',
          dark: '#34515E',
        },
        accent: {
          DEFAULT: '#009688',
          dark: '#00675B',
        },
        success: {
          DEFAULT: '#388E3C',
          dark: '#206625',
        },
        warning: {
          DEFAULT: '#FFC107',
          dark: '#D39E00',
        },
        info: {
          DEFAULT: '#03A9F4',
          dark: '#0276AA',
        },
        error: {
          DEFAULT: '#E53935',
          dark: '#A61F23',
        },
      },
    },
  },

  plugins: [],
};