はじめに

playgroundみたいなものを作ってみたかった

普段フロントエンド開発をしていてtailwindcssに触れる機会が多いので、
classを書き換えると反映されるようなサイトを作りました。

大したものではないのでハードルは下げてくださいまし

全体像

概要

こちらのフォームで書き換えたものが

こちらに反映されるようになっております。

開発環境

node
- v18.14.0
pnpm
- 7.26.3
Framework
- SvelteKit
UI components
- Flowbite-svlete

実装方法(抜粋)

より良い方法がありそう

classnameをストアに持ち、右側の変更を左側に伝えています。

ストア

src/store/classname.ts

import { writable, type Writable } from "svelte/store"

// 適当にデフォルト値入れておくと利用者が使い方を連想しやすい(かも)
export const divClass: Writable<string> = writable('font-bold text-2xl text-green-500')

プレビュー(画面左側)

Preview.svelte

// divの部分のみ抜粋
<script lang="ts">
  import { divClass } from "../store/classname";
</script>

<div class="ml-5 my-5">
  <div class={$divClass}>
    preview
  </div>
</div>

プロパティ(画面右側)

Property.svelte

// divの部分のみ抜粋
<script lang="ts">
  import { Tabs, TabItem, Input, Tooltip, List, Li } from 'flowbite-svelte';
  import { divClass } from "../store/classname";
</script>


// 実際には87~94行目は別コンポーネントに切り出し、'div', 'button', 'a'で使いまわしています。
<Tabs style="pill">
  <TabItem open>
    <span slot="title">div</span>
    <Input bind:value={$divClass}/>
    <Tooltip>edit class name</Tooltip>

    <List tag="ul" class="space-y-1">
      {#each $divClass.split(' ') as classname}
        <Li>{classname}</Li>
      {/each}
    </List>
  </TabItem>
</Tabs>

改善点(徐々に直していきます)

classを変えても一部のstyleが反映されないことがある
- {#key}blockを使ったが、ダメそう
- 何か方法を探す
display: flexなどのために子の要素を追加できるように
- innnerHTMLに追加するか、componentsを再起的に使う
div, button, aを用意しておくのではなく、element名も変えれるように
- <svelte:element this={tag}>で出来そう

tailwindcssを試せるサイトを作りました