Load endlessly

[mrleblanc101]

Does not seem to be doing anything, no error when I click on the tab icon, no error in the VS Code developer tools.

[mrleblanc101]

Here is the config file:

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import scrollbarHide from 'tailwind-scrollbar-hide';

/** @type {import('tailwindcss').Config} */
export default {
    corePlugins: {
        container: false,
    },
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],
    theme: {
        plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
            fontSize: {
                '3xl': 28,
            },
            borderRadius: {
                '3xl': '20px',
            },
            lineHeight: {
                normal: 'normal',
                regular: '1.5',
            },
            spacing: {
                22: '88px',
            },
            screens: {
                '2xl': '1440px',
            },
            colors: {
                tropical: {
                    50: '#f0f9f5',
                    100: '#dbf0e5',
                    200: '#b6d6cc',
                    // 200: '#bae0d0',
                    300: '#78C7B0',
                    // 300: '#8cc9b2',
                    400: '#5bac90',
                    500: '#3a8f75',
                    600: '#2a7660',
                    700: '#215b4c',
                    800: '#1c493d',
                    900: '#183c34',
                    950: '#0c221d',
                },
            },
            typography: (theme) => ({
                DEFAULT: {
                    css: {
                        a: {
                            '&:hover': {
                                'text-decoration': 'none',
                            },
                        },
                    },
                },
                tropical: {
                    css: {
                        '--tw-prose-bullets': theme('colors.tropical.500'),
                        a: {
                            color: theme('colors.tropical.500'),
                            '&:hover': {
                                color: theme('colors.tropical.600'),
                                'text-decoration': 'none',
                            },
                        },
                    },
                },
            }),
        },
    },

    plugins: [typography, forms, scrollbarHide],
};

[mrleblanc101]

tailwindcss@^3.4.4

[abdul-alhasany]

Sorry for the late reply. I will look into it

[abdul-alhasany]

I tested the config with a fresh vue project. It seems to work fine.

I changed import statements to require. Maybe that's the issue?