☝️

Marp で Tailwind CSS を使用する

に公開
VS Code
Tailwind CSS
Tailwind CSS
Marp
tech

はじめに

Marp でテンプレート的に常時使うものに関しては CSS で書けるけど、すぐに書くような時はあったほうが良いな〜と思い、導入したら少し躓いたので共有。

環境

Visual Studio Code ですでに Marp が使える状態であるとします。

導入

やっていきましょう。

VSCode の設定

Ctrl(Cmd) + , で設定を開いて markdown.marp.html を検索すると以下のものが出てくるので、all に設定する

VSCode でコマンドを実行する

Ctrl(Cmd) + Shift + P でコマンドパレットを開き、Markdown: Change Preview Security Settings を検索して

「無効にする」を選択する

追記(20251102)

なぜかコマンドパレットに入力しても出なくなってたので、一応Markdown側にスクリプトを追加した状態でプレビューするとSome content has been disabled in this documentというボタンが現れるので、これを押して無効化でも良いです

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