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.

Discussion (0)