Idea: create a Tailwind plugin for simpler configuration and setup

[remorses]

Currently you need to add a lot of configuration to Tailwind to make Tremor work: https://www.tremor.so/docs/getting-started/theming

Instead of asking users to change their config you could create a Tremor tailwind plugin that automatically injects these theme tokens, if the user wants to customize the tokens they can pass arguments to the plugin (and also get auto completion auto of the box).

NextUI already does this, here is an example of how you configure NextUI: https://nextui.org/docs/customization/theme

Here is the NextUI implementation: https://github.com/nextui-org/nextui/blob/canary/packages/core/theme/src/plugin.ts

There are several benefits in using a plugin:

1. You can make changes to the Tailwind configuration without breaking user code, you will simply ask the users to update the plugin
2. Getting started with Tremor is easier
3. It's clear what part of the tailwind configuration are there to make Tremor work, otherwise users are scared of touching the tailwind config because it could break something in Tremor components
4. You can check that the user config has no conflicts and is not missing any plugins

[remorses]

I made a plugin myself: https://github.com/remorses/tremor-tailwind-plugin, here is how to use it:

import colors from 'tailwindcss/colors'
import { tremorPlugin } from 'tremor-tailwind-plugin'

/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
export default {
    mode: 'jit',
    content: [
        './src/**/*.{js,ts,jsx,tsx}',
        './node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {},
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
        tremorPlugin({
            themes: {
                light: {
                    colors: {
                        brand: {
                            DEFAULT: colors.gray[600],
                            emphasis: colors.gray[700],
                            inverted: colors.white,
                            faint: colors.gray[100],
                            muted: colors.gray[300],
                            subtle: colors.gray[200],
                        },
                    },
                },
            },
        }),
        require('@headlessui/tailwindcss'),
        require('@tailwindcss/forms'),
    ],
}