fadgram-ui/components/base.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    h1 {
        @apply text-5xl mb-3;
    }

    h2 {
        @apply text-4xl mb-3;
    }

    h3 {
        @apply text-3xl mb-3;
    }

    h4 {
        @apply text-2xl mb-3;
    }

    h5 {
        @apply text-xl mb-3;
    }

    h6 {
        @apply text-lg mb-3
    }

    p {
        @apply mb-2;
    }

    .text-muted {
        @apply text-gray-500 dark:text-gray-400;
    }

    button {
        @apply cursor-pointer appearance-none;
    }

    .link {
        @apply font-medium text-blue-600 underline dark:text-blue-500 hover:no-underline transition-colors;
    }

    small {
        @apply text-sm text-gray-500;
    }

    .link {
        @apply text-blue-600 hover:text-blue-800 underline hover:no-underline transition-colors;
    }

    ul {
        @apply list-disc pl-6 mb-4;
    }

    ol {
        @apply list-decimal pl-6 mb-4;
    }

    blockquote {
        @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-4;
    }

    .code-inline {
        @apply bg-gray-100 px-2 py-1 rounded font-mono text-sm;
    }

    .code-block {
        @apply bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto;
    }

}