# Tiddlywiki Tailwindcss Plus

<img src="./img/tw.webp" class="rounded-md mt-2" alt="markdown plugins"/>

> 直接在 tiddlywiki 里面写 tailwindcss

> 由于Tailwindcss v4的浏览器不支持typography插件， 所以目前仅仅使用v3最新版本(3.4.16), 3.4.17 官方没有打包浏览器版本.

## 在线地址

<TwPlugin name="tiddlywiki-tailwindcss-plus" />

## Why Tailwindcss

* 一致性：使用 Tailwind CSS 可确保您的样式在整个 TiddlyWiki 中保持一致。使用 Tailwind 的实用程序类，您可以快速轻松地将样式应用到您的元素，而无需担心跟踪自定义类名称。

* 模块化：Tailwind CSS 被设计成模块化的，这意味着您可以只使用您需要的部分。这有助于保持您的 TiddlyWiki 精简并避免使用不必要的 CSS 使其膨胀。

* 易于使用：Tailwind CSS 使用简单，无需设置或配置。您可以立即开始使用它并立即提高工作效率。

* 可定制性：虽然 Tailwind CSS 提供了一套全面的开箱即用样式，但它还允许您自定义和扩展样式以满足您的特定需求。这可以通过其配置文件或创建您自己的自定义实用程序类来完成。

* 总体而言，在 TiddlyWiki 中仅使用 Tailwind CSS 可以简化您的样式设置过程，使您的样式更加一致，并减少您需要编写和维护的 CSS 数量。

## 用法

* 开箱即用，仅仅写 class 就行. 更多用法请查看 Tailwindcss 官方文档

```html
<div class="text-rose-400"> 这是一段有样式的句子 </div>

<div class="text-indigo-400 animate-bounce underline decoration-dotted underline-offset-8"> 这是一段有动画的句子 </div>
```

> <div class="text-rose-400"> 这是一段有样式的句子 </div>

> <div class="text-indigo-400 animate-bounce underline decoration-dotted underline-offset-8"> 这是一段有动画的句子 </div>