tailwind.config.js

/*
<COPYRIGHT>

    Copyright © 2016-2024, Canyon GBS LLC. All rights reserved.

    Advising App™ is licensed under the Elastic License 2.0. For more details,
    see https://github.com/canyongbs/advisingapp/blob/main/LICENSE.

    Notice:

    - You may not provide the software to third parties as a hosted or managed
      service, where the service provides users with access to any substantial set of
      the features or functionality of the software.
    - You may not move, change, disable, or circumvent the license key functionality
      in the software, and you may not remove or obscure any functionality in the
      software that is protected by the license key.
    - You may not alter, remove, or obscure any licensing, copyright, or other notices
      of the licensor in the software. Any use of the licensor’s trademarks is subject
      to applicable law.
    - Canyon GBS LLC respects the intellectual property rights of others and expects the
      same in return. Canyon GBS™ and Advising App™ are registered trademarks of
      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
      vigorously.
    - The software solution, including services, infrastructure, and code, is offered as a
      Software as a Service (SaaS) by Canyon GBS LLC.
    - Use of this software implies agreement to the license terms and conditions as stated
      in the Elastic License 2.0.

    For more information or inquiries please visit our website at
    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.

</COPYRIGHT>
*/
import preset from './vendor/filament/support/tailwind.config.preset';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import plugin from 'tailwindcss/plugin';

export default {
    presets: [preset],
    safelist: [
        'text-black',
        'text-gray-900',
        'dark:bg-gray-800',
        'dark:text-gray-100',
        'border-2',
        'dark:border-0',
        'border-gray-200',
        'rounded-none',
        'mx-4',
        'my-2',
        'px-8',
        'py-4',
    ],
    content: [
        './app/Filament/**/*.php',
        './app-modules/**/src/Filament/**/*.php',
        './app-modules/**/resources/views/**/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './node_modules/flowbite/**/*.js',
    ],
    theme: {
        extend: {
            colors: {
                gray: require('tailwindcss/colors').zinc,
            },
            fontSize: {
                'xxs': ['.5rem'],
            },
        },
        // Changes to colors also need to be reflected in FilamentServiceProvider
        colors: {
            trout: {
                50: '#f6f7f9',
                100: '#ededf1',
                200: '#d7d9e0',
                300: '#b4b9c5',
                400: '#8b92a5',
                500: '#6d758a',
                600: '#575d72',
                700: '#4d5264',
                800: '#3e424e',
                900: '#363944',
                950: '#24252d',
            },
            black: {
                50: '#f6f6f6',
                100: '#e7e7e7',
                200: '#d1d1d1',
                300: '#b0b0b0',
                400: '#888888',
                500: '#6d6d6d',
                600: '#5d5d5d',
                700: '#4f4f4f',
                800: '#454545',
                900: '#3d3d3d',
                950: '#000000',
            },
            white: {
                50: '#ffffff',
                100: '#efefef',
                200: '#dcdcdc',
                300: '#bdbdbd',
                400: '#989898',
                500: '#7c7c7c',
                600: '#656565',
                700: '#525252',
                800: '#464646',
                900: '#3d3d3d',
                950: '#292929',
            },
            'dodger-blue': {
                50: '#eef3ff',
                100: '#dae4ff',
                200: '#bcd0ff',
                300: '#8fb3ff',
                400: '#5989ff',
                500: '#3f69fe',
                600: '#1d3ef3',
                700: '#152ae0',
                800: '#1824b5',
                900: '#19258f',
                950: '#141957',
            },
            java: {
                50: '#f1fcfa',
                100: '#d1f6f1',
                200: '#a4ebe3',
                300: '#6edad1',
                400: '#40c1bb',
                500: '#2bb8b3',
                600: '#1c8583',
                700: '#1b6a6a',
                800: '#1a5555',
                900: '#1a4747',
                950: '#09292a',
            },
            'bright-sun': {
                50: '#fffbeb',
                100: '#fff4c6',
                200: '#fee989',
                300: '#fed43f',
                400: '#fec321',
                500: '#f8a208',
                600: '#db7a04',
                700: '#b65607',
                800: '#94420c',
                900: '#79370e',
                950: '#461b02',
            },
            'jungle-mist': {
                50: '#f3f8f8',
                100: '#e0eded',
                200: '#bed7d8',
                300: '#9cc2c4',
                400: '#6da0a3',
                500: '#518589',
                600: '#466e74',
                700: '#3e5b60',
                800: '#384e52',
                900: '#324247',
                950: '#1e2a2e',
            },
            'deep-blush': {
                50: '#fcf3f9',
                100: '#fbe8f6',
                200: '#f8d2ee',
                300: '#f4addf',
                400: '#ec7ac8',
                500: '#e151af',
                600: '#cf3391',
                700: '#b32376',
                800: '#942061',
                900: '#7c1f53',
                950: '#4b0c2f',
            },
        },
      
    },
    plugins: [
        forms,
        typography,
        require('flowbite/plugin'),
        plugin(({ matchUtilities, theme }) => {
            matchUtilities(
                {
                    'animation-delay': (value) => {
                        return {
                            'animation-delay': value,
                        };
                    },
                },
                {
                    values: theme('transitionDelay'),
                },
            );
        }),
    ],
};