%% generate tags start %%
#software-engineering #software-engineering/css
%% generate tags end %%
#software-engineering/css/tailwind
An example showing how to implement dynamic themes in [[tailwind]]
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/dkzlv/tw-dynamic-themes")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/dkzlv/tw-dynamic-themes" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - dkzlv/tw-dynamic-themes</div>
<div class="nifty-link-card-description">Contribute to dkzlv/tw-dynamic-themes development by creating an account on GitHub.</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/dkzlv/tw-dynamic-themes
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/09594f631d3ad0eb456ade3b07796b8720f43b5e192fca5ab584a0b214821dc8/dkzlv/tw-dynamic-themes')">
</div>
</div>
</a>
</div>
%% run end %%
You can try it out here.
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://tw-dynamic-themes.vercel.app/")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://tw-dynamic-themes.vercel.app/" target="_blank">
<div class="nifty-link-card-text" style="width: 100%;">
<div class="nifty-link-card-title line-clamp-2">Dynamic Tailwind themes</div>
<div class="nifty-link-card-description"></div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://tw-dynamic-themes.vercel.app/icon.png?4f949745fdf81a62">
https://tw-dynamic-themes.vercel.app/
</div>
</div>
</a>
</div>
%% run end %%