Custom colors in tails

Hey Bettina! 👋

Yes, you should be able to use your own custom color palette within Tails.

Here’s how this could work:

1. Modify the Tailwind Configuration

First, you need to modify your tailwind.config.js, just go to Settings -> Tailwind -> and include your custom colors.

Here’s an example of how you can define a custom color palette in your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          100: '#f0e6ff',
          200: '#dab7ff',
          300: '#c488ff',
          400: '#ae59ff',
          500: '#9800e8', // primary brand color
          600: '#7600b5',
          700: '#540082',
          800: '#32004f',
          900: '#1e002f'
        },
        // You can add as many custom colors as you need
      },
    },
  },
}

2. Using Custom Colors in Your Project

After you've defined your custom colors in the Tailwind configuration, you can start using them in your CSS just like any other Tailwind color. For example:

<button class="bg-brand-500 text-white hover:bg-brand-600">
  Click me
</button>

Let me know if you have any questions!

- Bobby