Im’ trying to use a tailwindCSS card embedded in a grid card, to make a welcome message. I’ll admit I don’t have a great grasp on how card_mod operates, but I was able to make it work on other cards. I’ve tried everything I can think of with card_mod to remove the background from the left card. Tried it in the card config, and in the overall dashboard config. I’ve pasted my page yaml below.
views:
- type: sections
sections:
- type: grid
cards:
- square: false
type: grid
cards:
- type: custom:tailwindcss-template-card
content: >
<div class="flex">
<div class="flex flex-col">
<div class=" text-5xl font-light">
Good {{states('sensor.time_of_day_description')}}, Palmer family.
</div>
<div class="text-5xl font-light">
{% set t = state_attr('weather.forecast_home', 'temperature') %} {% set fc =
state_attr('weather.forecast_home', 'forecast') %} {% set map
= {
'partlycloudy': 'partly cloudy', 'clear': 'clear', 'cloudy':
'cloudy', 'rainy':
'rainy' } %} {% set cond = states('weather.forecast_home') %}
{% set is_day =
is_state('sun.sun', 'above_horizon') %} {% set dn = 'day' if
is_day else 'night'
%} {% set icon = { 'sunny': 'clear-day', 'clear-night':
'clear-night',
'partlycloudy': 'partly-cloudy-' ~ dn, 'cloudy': 'cloudy',
'overcast':
'overcast', 'fog': 'fog-' ~ dn, 'mist': 'mist', 'haze':
'haze-' ~ dn, 'smoke':
'smoke', 'dust': 'dust-' ~ dn, 'windy': 'wind',
'windy-variant': 'wind',
'rainy': 'rain', 'pouring': 'rain', 'drizzle': 'drizzle',
'hail': 'hail',
'snowy': 'snow', 'snowy-rainy': 'sleet', 'lightning':
'thunderstorms-' ~ dn,
'lightning-rainy': 'thunderstorms-' ~ dn ~ '-rain',
'exceptional':
'not-available' }.get(cond, 'not-available') %} {% set w =
states('weather.forecast_home') %}
It is {{ t | round(0) }}° and {{ map.get(states('weather.forecast_home'),
states('weather.forecast_home')) }}{% if fc and
fc[0].precipitation_probability | default(0) > 40 %}. It might rain
later.{% endif %}.
<img
style="display: inline-block; height: 70px; width: auto"
src="/local/weather_icons/{{ icon }}.svg"
/>
</div>
<div class="font-bold text-2xl">
{% set events = state_attr('calendar.family',
'events') %} {% set count = events | length if events else 0
%}
You have {{ 'no' if count == 0 else count }} event{{ '' if count == 1 else
's' }} today.
</div>
</div>
</div>
ignore_line_breaks: true
always_update: false
parse_jinja: true
code_editor: Ace
entities: []
bindings: []
