TailwindCSS Template Card for Home Assistant (dashboard card)

Screenshots From the README of usernein/tailwindcss-template-card.

About

TailwindCSS Template Card is a dashboard card that renders HTML styled with TailwindCSS classes. It adds a way to build custom layouts on a Home Assistant dashboard by writing HTML directly in the card configuration. Styling comes from TailwindCSS classes, which also provide responsive layouts that adapt to different screen sizes. Interactive elements can be made with CSS inside the HTML code. Rendering of the classes relies on Twind, which the README names as the reason the card is possible. It is installed through HACS as a custom repository, or by copying the files manually.

Automatic summary of the README of usernein/tailwindcss-template-card. Something wrong, or are you the maintainer and want your own text here? Get in touch

Supports

From the Marketplace Installed through the Marketplace, formerly HACS.

Setting it up

Install it from the Marketplace, then add a card of this type to a dashboard.

From the README

The TailwindCSS Template Card is a custom card for Home Assistant that allows you to write HTML code using TailwindCSS classes and render it beautifully in the Home Assistant dashboard. This card provides flexibility in designing custom interfaces within Home Assistant, allowing you to create visually appealing and interactive elements.
HTML Rendering: Write HTML code directly in your Home Assistant configuration, utilizing the power of HTML and TailwindCSS.
TailwindCSS Classes: Use TailwindCSS classes to style your HTML elements, giving you access to a wide range of pre-built styles and responsive design options.
Responsive Design: Leverage the responsiveness of TailwindCSS to create layouts that adapt to different screen sizes and devices.
Interactive Elements: Create interactive elements with CSS within your HTML code, enhancing the user experience of your Home Assistant dashboard.
Real-time Preview: Write your HTML code with TailwindCSS classes and instantly see it rendered with the power of Twind.style

From the README of usernein/tailwindcss-template-card, MIT License. Shortened.