☝️
Marp で Tailwind CSS を使用する
はじめに
Marp でテンプレート的に常時使うものに関しては CSS で書けるけど、すぐに書くような時はあったほうが良いな〜と思い、導入したら少し躓いたので共有。
環境
Visual Studio Code ですでに Marp が使える状態であるとします。
導入
やっていきましょう。
VSCode の設定
Ctrl(Cmd) + ,
で設定を開いて markdown.marp.html
を検索すると以下のものが出てくるので、all
に設定する
VSCode でコマンドを実行する
Ctrl(Cmd) + Shift + P
でコマンドパレットを開き、Markdown: Change Preview Security Settings
を検索して
「無効にする」を選択する
Markdown に Tailwind を追加する
frontmatter の後に script
を埋め込む
---
marp: true
---
<script src="https://cdn.tailwindcss.com/3.0.16"></script>
<script>tailwind.config = { corePlugins: { preflight: false } }</script>
そしたらいい感じに使えます👇
# タイトル
HTMLはもちろん、Tailwindも使えるます
<div class="flex items-center">
<img src="https://example.com/hoge.png" />
<p>
こういうことですね
</p>
</div>
最後に
TL;DR にまとめようとしたら、結局まとまってませんでしたので、無くしました。
では、良い Marp ライフを。
Discussion