TailwindCSS Template Card and Decluttering Card Based Dashboard

Hello,

This is not a question, I have been using Home Assistant for a while now. I tried many integrations and UI components during the process of creating a Dashboard. We all know that they have very successful and beautiful components. For many reasons that I cannot briefly explain right now, I slowly started to remove these components from the system. Some of these were compatibility problems with each other or some were limitations. Finally, I decided to try something different this weekend and for now, I came up with this simple interface with 2 screenshots and 1 video below.

From a basic perspective, I worked on the following question, preferring to use Home Assistant as simply as possible.

  • I wonder what I can do?

I was already using the Decluttering Card with great pleasure. As a software developer, I was already using “TailwindCSS” in my projects. Therefore, I created small reusable components using a combination of “TailwindCSS Template Card” and “Decluttering Card”. My first attempts (see below) convinced me to continue. I’m also curious about your opinions. All components I developed have a responsive design. When you turn the phone sideways or view it from the Tablet, the screen is positioned accordingly. However, I have seen that it is more effective to create a separate Dashboard, especially for the Tablet, and make different presentations.

Remember that these are very early experiments. Some performance testing is required. On the other hand, colors should also be worked on for Dark Theme. Some performance measurements should also be made.

Dashboard Image
Preview Video

I’m curious about your ideas and experiences, please share them with me.

Thanks in advance,
Have a nice day.

1 Like

Hei! I came via google search for tailwind templates in Home assistant to this thread! Looks awesome! Would you mind sharing how you did this exactly? Is this just the decluttering card with the tailwind template card? or a complete other “Website” thing? Thank you!