![見出し画像](https://assets.st-note.com/production/uploads/images/101109121/rectangle_large_type_2_527970327bf3cd08557442d38dce28ed.png?width=1200)
Photo by
washizukami
Tailwind CSSを使ってみる
Svelteアプリを素敵に見せるために、CSSのフレームワークを探してみました。そしたら"Tailwind"というものを見つけたわ。
ちなみにTailwindは、「追い風」という意味なのよ。
CSSを書かずに、HTMLのクラスに追加するだけでも、開発がスムーズに進むかもしれませんね。たしかに「追い風」になりそう。
SvelteKitへの導入は、説明にしたがい、無事に終了。Viteをsvelte.configに追加する方法がかいてあったが、SvelteKit導入時に入れているのここはスキップ。
https://tailwindcss.com/docs/guides/sveltekit
Svelteのアプリにこんな感じに、tailwindのclassを追加してみたら、
![](https://assets.st-note.com/img/1679710066633-UjlOgXay6Z.png?width=1200)
このように、文字サイズが簡単にかえられました。
![](https://assets.st-note.com/img/1679710148280-u4MA7FeoHL.png)
CSSをまったく書かずにスタイルが変更できるのはこれは確かに楽かも。TialWindが開発の追い風になって、背中を押してくれそうな予感。
この記事が気に入ったらサポートをしてみませんか?