DEV Community

Cover image for Built a Slack clone with Tailwind & Alpine.js
Zack Webster
Zack Webster

Posted on

Built a Slack clone with Tailwind & Alpine.js

After the sidebar last week, I thought let's build something bigger. And so Slackish came into existence - a quick prototype build of Slack. Links to demo and source are included in this article.

Intro

So, here's a quick preview of what it looks like.
Alt Text

Features

  • Switch between conversations
  • Channels and direct messages
  • Indicate active conversation in sidebar.
  • Display user online status indicator on title bar & sidebar for DMs.
  • Auto scroll chat on new message.
  • Custom scroll bars similar to Slack.

Demo & Code

Take this project for a spin here: https://tailpine.netlify.app/slack/
And here's the source code: https://github.com/zaxwebs/tailwind-alpine/tree/main/slack

Develop Further

Feel free to fork and add to it.
Here's a few ideas:

  • Responsiveness
  • Dropdown for channels & DMs.

Conclusion

Tailwind and Alpine is a sweet combo to get up and running quick for setting up prototypes and more! The ecosystem is growing and there's so much more to come.

Thanks for reading.

Top comments (0)