--- title: Easy empty states for Phoenix LiveView streams using... description: Learn how to render empty states in Phoenix LiveView streams using Tailwind. Discover the quirks of using Phoenix 1.7 streams and how they use their own... canonical: https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Easy empty states for Phoenix LiveView streams using Tailwind | daily.dev og:description: Learn how to render empty states in Phoenix LiveView streams using Tailwind. Discover the quirks of using Phoenix 1.7 streams and how they use their own... og:url: https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf og:image: https://api.daily.dev/og/posts/GtihwRfSf.png og:image:alt: Easy empty states for Phoenix LiveView streams using Tailwind og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Easy empty states for Phoenix LiveView streams using Tailwind **[ElixirStatus](https://daily.dev/sources/elixirstatus)** · 3 min read · 4 upvotes · 0 comments ## Summary Learn how to render empty states in Phoenix LiveView streams using Tailwind. Discover the quirks of using Phoenix 1.7 streams and how they use their own special data structure. Utilize CSS pseudo-classes to conditionally show or hide elements. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#webdev](https://daily.dev/tags/webdev), [#elixir](https://daily.dev/tags/elixir), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#liveview](https://daily.dev/tags/liveview) [View this post on daily.dev](https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Easy empty states for Phoenix LiveView streams using Tailwind","url":"https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf"},"datePublished":"2024-03-21T16:49:45.655Z","dateModified":"2024-05-09T08:39:06.345Z","description":"Learn how to render empty states in Phoenix LiveView streams using Tailwind. Discover the quirks of using Phoenix 1.7 streams and how they use their own...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c4d6550ddd8b71e5aeb777230594a01c?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c4d6550ddd8b71e5aeb777230594a01c?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"ElixirStatus","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"ElixirStatus","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/22e4640538124187827caf8cc8e39190","url":"https://daily.dev/sources/elixirstatus"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/easy-empty-states-for-phoenix-liveview-streams-using-tailwind-gtihwrfsf","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,elixir,tailwind-css,liveview","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ElixirStatus","item":"https://daily.dev/sources/elixirstatus"},{"@type":"ListItem","position":3,"name":"Easy empty states for Phoenix LiveView streams using Tailwind"}]} ```