Skip to content

TailwindCSS

Latest

Choose a tag to compare

@knoop7 knoop7 released this 06 Jun 17:39
· 1 commit to main since this release

Skeleton Loading Layer

  • Added soft and consistent skeleton effects during card pre-render and render phases to reduce jarring layout jumps
  • Preview area now uses a controlled skeleton layer to prevent the "single horizontal line" collapse issue before content loads
  • Lightweight overlay added for quick re-renders to make brief refreshes feel smoother

Graceful Image Fallback

  • Missing or failed images now display a clean light gray visual placeholder instead of leaving broken gaps

YAML Entity List Recognition

  • When pasting complete YAML configurations into the editor, entity arrays are now recognized more reliably and preserved in the config state

External Script Library Support

  • Added support for importing external script libraries including Tailwind CSS (twcss), Bootstrap JS Bundle, anime.js, and other utility frameworks
  • Skeleton placeholders are shown while scripts load, then smoothly transition to rendered content once ready to prevent style flashing
  • Key online JS library URL: https://cdn.tailwindcss.com
  • Usage: Add a scripts field to the card configuration with the external script URLs. The system loads them in order during initialization and keeps the skeleton state active until all resources are ready.
type: custom:html-pro-card
scripts:
  - https://cdn.tailwindcss.com
content: |
  <div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
    <h1 class="text-xl font-bold">Hello Tailwind</h1>
    <p class="mt-2">This card is powered by Tailwind CSS utility classes.</p>
  </div>

Full Changelog: v3.7...v3.8