Theme Color - SaasFrontends

Color utilities

Instead of using hard-coded Tailwind CSS colors, I decided to use bg-theme-... and text-theme... instead of bg-red-... or text-red-....

This way, where the application accent color is.

Configuration

You can customize the default theme color for your project by changing the theme extended color in tailwind.config.js:

tailwind.config.js

...
module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        ...
        theme: {
          50: colors.blue[50],
          100: colors.blue[100],
          200: colors.blue[200],
          300: colors.blue[300],
          400: colors.blue[400],
          500: colors.blue[500],
          600: colors.blue[600],
          700: colors.blue[700],
          800: colors.blue[800],
          900: colors.blue[900],
        },
      },
    },
  },
  ...
};