While Home Assistant offers a range of official integrations available via Settings -> Integrations, there are many more community-created integrations accessible through the Home Assistant Community Store (HACS). One such integration is the TailwindCSS Template Card, which you can install from HACS. You can find installation instructions on the card’s GitHub page. This card allows you to design custom cards for your Home Assistant dashboard with full control over design and layout, enabling you to use cool colors and animations for a highly flexible setup.
However, to leverage the full potential of the TailwindCSS Template Card, you need a good grasp of HTML and CSS. While I won’t dive into the intricacies of HTML and CSS here, I’d like to share a simple yet effective use case of this card that you can adopt as-is or with minimal modifications.
One of the ways I’m using this card is to create titles for sections in my dashboard. For instance, I have a section dedicated to all my security-related cards, including cameras and door sensors. A nice way to create a title for this section is with the following card setup:
- entity: ''
content: |-
<div class="flex flex-row gap-2 justify-start">
<div class="justify-start items-center w-7 h-8 rounded-lg mt-1 animate-[ping_2s_linear_3]">
<ha-icon icon="mdi:security"></ha-icon>
</div>
<div class="font-regular text-3xl">Security</div>
</div>
ignore_line_breaks: true
always_update: false
parse_jinja: true
code_editor: Ace
entities: []
bindings: []
actions: []
debounceChangePeriod: 100
plugins:
daisyui:
enabled: true
url: https://fastly.jsdelivr.net/npm/daisyui@latest/dist/full.css
theme: dark - dark
overrideCardBackground: false
tailwindElements:
enabled: false
type: custom:tailwindcss-template-card
This setup displays the word “Security” with a shield icon next to it. The shield icon animates briefly before stopping, catching your attention without being overly distracting. Here’s how it looks in my dashboard:

Conclusion
The TailwindCSS Template Card is a powerful tool for customizing your Home Assistant dashboard. While it requires some knowledge of HTML and CSS, it offers unparalleled flexibility in design and layout. The example provided here is just one of many ways you can use this card to enhance your smart home interface. Give it a try and see how you can make your dashboard both functional and visually appealing.