SLACK CLONE with Blazor | SignalR | TailwindCSS - Day 2 (Interface Design)

Introduction Hello guys 😀, welcome to day 2 of our Slack Clone build series. This blog post will serve as an informational platform for the videos as we build.

##Resources List

Icon Set

Iconify is a unified icon framework.

Pros

• Ability to use a variety of icon mixes from a single resource.

Cons

• Almost all of them load an entire set, even if you are displaying just a few icons.

Scrollbar Style

@layer utilities {
    .scrollbar::-webkit-scrollbar {
        width: 10px;
        height: 20px;
    }

    .scrollbar::-webkit-scrollbar-track {
        background: #2B092A;
    }

    .scrollbar::-webkit-scrollbar-thumb {
        background: #99668e;
        border-radius: 100vh;
        border: 3px solid #3E103F;
    }

        .scrollbar::-webkit-scrollbar-thumb:hover {
            background: #c0a0b9;
        }
}

Tailwind Configuration & Colour Set

module.exports = {
    mode: 'jit',
    content: ['./**/*.razor', './wwwroot/index.html'],
    theme: {
        extend: {
            colors: {
                slack_bg: "#3E103F",
                slack_nav: "#2B092A"
            }
        },
    },
    plugins: [],
};