Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usernein/tailwindcss-template-card
Custom card for Home Assistant that renders html code with TailwindCSS styles into the dashboard
https://github.com/usernein/tailwindcss-template-card
daisyui dashboard hass homeassistant lovelace preact tailwind tailwindcss twind
Last synced: about 2 months ago
JSON representation
Custom card for Home Assistant that renders html code with TailwindCSS styles into the dashboard
- Host: GitHub
- URL: https://github.com/usernein/tailwindcss-template-card
- Owner: usernein
- License: mit
- Created: 2023-05-27T21:01:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-19T14:06:59.000Z (about 1 year ago)
- Last Synced: 2024-08-07T18:27:00.776Z (6 months ago)
- Topics: daisyui, dashboard, hass, homeassistant, lovelace, preact, tailwind, tailwindcss, twind
- Language: TypeScript
- Homepage:
- Size: 1.17 MB
- Stars: 44
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# TailwindCSS Template Card for Home Assistant
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.
## Features
- **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](https://twind.style)
## Demo
https://github.com/usernein/tailwindcss-template-card/assets/29507335/752667e7-df4a-4c73-a151-e03c7fc67ba7
https://github.com/usernein/tailwindcss-template-card/assets/29507335/c0c1e086-f76e-4908-beed-79e747bcc15c
## Installation
### With HACS
Set `https://github.com/usernein/tailwindcss-template-card` as a custom repository in HACS. Now you should receive the TailwindCSS Template Card as new plugin to install.
### Manually
1. Copy the `tailwindcss-template-card` directory to your Home Assistant's `config/www` directory.
2. Add the following to your Home Assistant's `configuration.yaml` file:
```yaml
lovelace:
resources:
- url: /local/tailwindcss-template-card/dist/tailwindcss-template-card.js
type: module
```
3. Restart Home Assistant to load the custom card.
## Usage
To use the TailwindCSS Template Card, follow these steps:
1. Open your Home Assistant dashboard.
2. Edit the Lovelace configuration by clicking on the three dots in the upper right corner and selecting "Configure UI" or by manually editing the `ui-lovelace.yaml` file.
3. Add a new card and select the "TailwindCSS Template Card" from the available card types.
4. In the card configuration, you can define your HTML code using TailwindCSS classes to style the elements.
5. Save the configuration and enjoy your custom-designed card in your Home Assistant dashboard.
## Examples
Here are some examples of how you can use the TailwindCSS Template Card to create beautiful cards in your Home Assistant dashboard:
## Example 1
```yaml
type: custom:tailwindcss-template-card
content: >
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in quam semper, vestibulum velit ut, faucibus est. Suspendisse commodo, tortor et varius pretium, est tortor mollis mauris, in fringilla felis arcu quis lacus. Aenean placerat risus sed nulla egestas, quis pellentesque tortor ultrices. Cras vel sem eu libero commodo tempus. Pellentesque mi erat, mattis id lectus nec, ullamcorper porta sapien.
Click me
```
## Example 2
```yaml
type: custom:tailwindcss-template-card
ignore_line_breaks: true
content: |
:)
```
## Example 3
```yaml
type: custom:tailwindcss-template-card
content: |
{% for color in ["slate", "red", "purple", "cyan", "blue", "green", "yellow"] %}
{% endfor %}
```
## Example 4
```yaml
type: custom:tailwindcss-template-card
content: |
{% for n in range(1,10) %}
{% for color in ["zinc", "slate", "red", "orange", "purple", "cyan", "blue", "green", "yellow"] %}
{% endfor %}
{% endfor %}
```
## Example 5
```yaml
type: custom:tailwindcss-template-card
content: |
The sun is {{ states('sun.sun') }}
Rising: {{ 'yes' if state_attr('sun.sun', 'rising') else 'no'}}
```
## Acknowledgements
I would like to extend my sincere gratitude to the following projects, libraries, and individuals for their contributions and inspiration:
- [TailwindCSS](https://tailwindcss.com/) and [Home Assistant](https://home-assistant.io): obvious reasons <3
- [threedy-card](https://github.com/dangreco/threedy): the card that helped me to understand the way of working with Preact in custom cards
- [Home-Assistant-Lovelace-HTML-Jinja2-Template-card](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card): the amazing card that teached me the way of rendering Jinja templates with Home Assistant
- [Twind.style](https://twind.style): the reason why this card is possible
- [Gourav Goyal](https://www.linkedin.com/in/gorvgoyl/): who wrote [this amazing article](https://gourav.io/blog/tailwind-in-shadow-dom) that presented me to Twind
## Contributing
Contributions to the TailwindCSS Template Card for Home Assistant are welcome! If you have any ideas, suggestions, or bug reports, please open an issue on the [GitHub repository](https://github.com/usernein/tailwindcss-template-card/issues). Pull requests are also encouraged.
Before making significant changes, please discuss them with the repository maintainers to ensure they align with the project's goals and direction.
## License
This project is licensed under the [MIT License](LICENSE.txt).